精华内容
下载资源
问答
  • web前端响应式设计总结

    万次阅读 多人点赞 2017-08-30 10:20:51
    web前端响应式设计总结 一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈...
    

    web前端响应式设计总结

    一、响应式概述

      响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈到响应式网站,目前比较主流的做法是通过前端通过判断userAgent来做页面的302跳转。

    那么问题来了,使用userAgent的问题:

    • 依赖设备本身浏览器或设备特点,例如尺寸,屏幕分辨率等。
    • 需要分配多个站点页面跳转适配浏览器。例如:ke.qq.com,m.ke.qq.com,来分别存放PC端和移动端的页面。
    • 多了一次跳转,跳转之前的逻辑不能少,这样用户体验就慢了

      当然我们也都知道像bootstrap这种ui框架也是响应式的,即写一份代码,在浏览器和移动端都能跑,然而事实上这些事远远不够的,而且在移动端为什么要加载那么多PC端的内容?

      我们理解的是完整的响应式页面的设计不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等,其实大部分人通常理解的都停留在这个方面。完整的响应式网站的实现其实需要考虑到以下这些问题:响应式布局响应式html和css响应式媒体响应式javascript

      这些页面在移动端和PC端使用同一个页面(大家可以用chrome浏览器一下),这样就避免了多余的302跳转,另外页面布局、逻辑、图片等内容都通过不同浏览器来适应。下面具体讲下各个部分的实现所涉及的内容。

    二、响应式布局

      响应式布局是用来兼容浏览器分辨率,清晰度,横屏,竖屏的页面元素布局方式。一般使用栅格方式实现。时间思路有两种,一种是PC端优先,另一种是以移动优先,PC端作为一个扩展。由于移动端的资源比较优先,一般比较推荐从移动端扩展到PC端,这样就避免了在移动端加载多余的PC端内容。响应式布局主要可以结合几种实现方式:

    1,移动端布局控制

    使用 viewport标签在手机浏览器上控制布局控制不缩放等通用定义。

    1
    2
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="blank" />
    

    由于这些定义在移动端必须定义,这里还是需要定义,用到PC端也不影响,只是有些多余。

    2,普通元素的栅格布局

    对于普通的div布局,使用了通用简单的栅格布局,相信这个大家都知道原理:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .row{
      width: 100%;
    }
    .row .col-1 {
      width: 8.33333333333%
    }
    
    .row .col-2 {
      width: 16.6666666667%
    }
    
    /* ...比较多,这里省略 */
    
    .row .col-12 {
      width: 100%
    }
    

    这里借鉴了其它的一下栅格系统的设计: Responsive Grid System Fluid 960 Grid(adaptjs) Simple Grid

    3,不同设备元素容器布局

      通用栅格布局并不能解决我们全部的问题,例如某个页面板块列表,PC端一排展示4个,移动端一排展示2两个,使用栅格的话我们就需要重新定义.col-3和.col-6了。对于这种情况我们的处理方法也比较简单   对于移动端浏览器,通过简单的js逻辑判断,在html的body中加入mobile的内容,在body里面的相同元素使用不同的宽度布局的方式。这种方式订制化坚强,如果宽度布局用的不多,即可以使用这种不同宽度布局的方式来实现。这样就实现了一个普通div在移动端和PC端的不同布局。

    1
    2
    3
    4
    5
    6
      .container{
        width: 25%;
      }
      .mobile .container{
        width: 50%;
      }
    

    三、响应式html与css

      这两个结合起来介绍是因为这两个比较强相关。由于移动端页面的html可能相对简单,但是扩展到PC会增加额外的html结构,例如下面截图中的框中部分,在移动端时不显示或显示另一种样式,例如下面两图对比。那我们如何做到两个平台两种不同展示呢?

      方法思路一:使用相同html结构,对于要在移动端要隐藏的dom元素,可以通过display: none来控制html是否显示;对于展示样式不同的,需要在PC端额外引入css覆盖移动端的原有样式(之前说过了,PC端资源相对移动端比较充裕,PC端可以接受额外增减少量的css文件来实现响应式)。

      方法思路二:动态使用js渲染不同内容,但是这样会增加移动端js大小,而且css样式文件必不可少。相比之下,我们使用了思路一的方案。其实使用js的渲染方案也是可以的,不过毕竟保留html比使用js简单。

      讲到这里相信大家也都懂了。

    四、响应式媒体

      响应式网站设计比较复杂的就是图片媒体处理了。布局做了响应式处理,但是在我们手机访问时,请求的图片还是PC浏览器上请求的大图;文件体积大,消耗流量多,请求延时长。响应式媒体要解决的两个关键点是媒体尺寸自适应和屏幕分辨率自适应。当然这里使用到的媒体主要指图片,但要明白的是,不仅仅只有图片。

      先看看一般的媒体大小自适应解决方案,我们没有使用这里的方案,而是结合借鉴了这里的思路,而且我们也有必要了解这些解决方案。

    1,使用css背景图片 (依赖media query)

      将图片设计为背景图片,并在css通过media query来加载所需要的背景图片。这样就会根据访问设备的属性来加载形影的图片。但是无法定义页面图片图片属性。

    2,picture element (依赖浏览器新特性+midea query)

      W3C已经有一个用于响应式图形的草案:新定义标签,但因为它还只是草案,目前还没有支持的浏览器,期待在不久的未来我们能用上。虽然目前不支持,但我们还是来了解下这个浏览器的新特性,也和我们一贯的研究方向一致。 picture是一个图形元素,内容由多个源图组成,并由CSS Media Queries来适配出合理图形,代码规范如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <picture width="500" height="500">
       <source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
       <source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
       <source srcset="small-1.jpg 1x, small-2.jpg 2x">
       <img src="small-1.jpg" alt="">
       <p>Accessible text</p>
       <!-- Fallback content-->
       <noscript>
          <img src="external/imgs/small.jpg" alt="Team photo">
       </noscript>
    </picture>
    
    source: 一个图片源;
    media: 媒体查询,用于适配屏幕尺寸;
    srcset: 图片链接,1x适应普通屏,2x适应高清屏;
    <noscript/>: 当浏览器不支持脚本时的一个替代方案;
    <img/>: 初始图片;另外还有一个无障碍文本,类似<img/>的alt属性。
    <picture>目前还不支持,但它的原理我们是可借鉴的,所以就诞生了一个用于图片响应式处理的类库picturefill
    

    3,picturefill (依赖js+media query)

      https://github.com/scottjehl/picturefill   http://scottjehl.github.io/picturefill/

      可以认为是picture元素的一个polyfill,(什么是polyfill?晶哥第一次沙龙讲过,就是修复浏览器特性不支持的”腻子”)。 未来我们可能使用picture元素来进行图片在页面的适应。而picturefill是w3c提供的最新的针对响应式图片的设计方案,但是需要浏览器支持picture属性,原理就是JS获取Source的源以及CSS Media Queries规则,输出适应图片。

    这个是picturefill实现的部分源码,大致看了一下,原理就是使用javascript来解析picture元素定义的标签,来在页面上强行使用picture类似元素。但是个人觉得性能方面值得去考虑。

    4,adaptive-images

    http://adaptive-images.com/

      实现原理是浏览器访问服务器图片时带上浏览器的窗口信息,服务器获取后根据窗口信息获取相对应的图片返回。 这是一个服务端解决方案,优点:一是不用更改现有的HTML标签结构,因此可快捷地应用于过去的项目;二是对于任何图片,包括JS添加的,都会起作用,即图片宽度不会大于浏览器宽度,三是由于其采用服务端解决方案,兼容性很广。   但是,其缺点也是明显的:首先,其依赖Cookie和JS,浏览器信息需要通过js存放cookie,发送时放在头部发送,这导致一些禁用或不能使用Cookie和JS的浏览器不能使用。然后是其对所有图片都起作用,这不适用于那些需要加载大图片的情形;最后,不适用于CDN,因为图片都是针对特定设备即时生成的,我觉得可以修改后端代码做

    5,responsive-images.js(依赖js)

      官网:https://github.com/kvendrik/responsive-images.js   这个与picturefill类似,不过它不依赖media query,而是通过JS检测浏览器的可见视口宽度来决定选择合适的图片,因此其兼容性很广,所有的主流浏览器。同时也不需要额外的标签,而是需要额外的属性,但是它不支持JS添加的图片,至少目前还不支持。

    1
    2
    <img alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg,
     <768:small.jpg,<960:medium.jpg,>960:big.jpg' />
    

    6,不同屏幕分辨率自适应方案

      主要是解决高清屏(retina屏)的问题,由于高清屏与普通屏幕有所区别:

      由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案。(此处没去深究)JS检测是否高清屏:var retina = window.devicePixelRatio > 1;   例如一个边框的

    1
    2
    3
    4
    5
    6
    7
    @media only screen and (-webkit-min-device-pixel-ratio:2),
           only screen and (min-device-pixel-ratio:2) {
    button {
      border:none;
      padding:0 16px;
      background-size: 50% 50%;
    }
    

    结合实现思路:   然而这里没有一种单一方案能满足我们的需求,不过借鉴这些思路的处理过程,我们的处理思路也基本类似:由于这里的图片数据是异步拉取渲染的,而且我们的图片加载选择和屏幕宽度无关,和浏览器设备相关,那就可以通过浏览器通过js(或css)获取用户设备类型、分辨率,然后通过判断用户设备输出适应的大小图片图片的dom结构,另外如果用户屏幕是高清屏,还的输出双倍分辨率的图片适应屏幕。

    五、响应式javascript

      真正的响应式设计的网站,处理使用不同的布局、html、css和图片,还需要根据浏览器环境来异步加载不同的js文件。和之前思路一样,这里我们主要通过设备环境判断来异步加载不同的javascript,下面这样就实现了安装浏览器环境来加载了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    if(isMobile){
        require.async(['zepto', './mobileMain'], function($, main){
            main.init();
        });
    }else{
        require.async(['jquery', './main'], function($, main){
            main.init();
        });
    }
    

      这样就有效保证了当时移动端时加载移动端需要的js同时避免了多余的js文件的下载。至于这里如何打包,就是另一个问题了,而且有点坑要填,这里开始我们没有处理好判断逻辑打包的问题,后来通过自己开发构建插件实现这个逻辑的打包。

    六、一般响应式网站架构

      这里实际不是我们的实现部分,而且不符合我们的需求,后台部署实现也复杂,但是这里还是总结补充梳理一下来做完整地做个总结。

    (1) 简单网站的响应式结构

      使用media query指定屏幕适应属性实现网页自适应,不同设备下的css写在一个文件内,css按模块管理。模块分开,易于管理和编码实现,也便于维护,是中小型网站实现响应式的不二选择。

    缺点:对于样式复杂的网站没有拆分,不能根据对应屏幕加载对应样式,造成带宽浪费;不利于优化和cdn。

    (2) 分流响应式站点

      javascript根据userAgent特性来加载不同域下的css,可以尽可能避免使用media query,不同浏览器环境下的样式分离管理,实现了平台样式分离,易于cdn管理。

    缺点:需要维护多套样式表,即使公共部分抽离,一旦修改,影响多个平台环境;需要判断UA;架构实现稍微复杂。

    (3) 后台页面直出

      和adaptive-images实现方法类似,首先是建立在不同环境下样式分离管理的基础上,后台根据静态文件请求所带的cookie信息直出静态页面,拉取相对应的css。

    缺点:需要依赖cookie机制,服务器需要进行处理。(不过这层直出可以使用node中间服务获取,由这层服务请求后台,再返回给前端)

    七、总结

      再来回头看下本文总结了啥,还是回到开头的几个问题,响应式网站设计实现包含的几个方面:响应式布局响应式html和css响应式媒体响应式javascript,总结了较多别人的实现方案,也提出了我们的实践方法,另外补充了下通用的响应式架构。这里就先总结到这里,另外,有不准确的欢迎拍砖。

    展开全文
  • WEB前端响应式布局之BootStarp使用

    千次阅读 多人点赞 2019-05-27 22:44:39
    4. 响应式布局 5. CSS样式和JS插件 1.Bootstrap简介: 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web ...

    目录

    1.Bootstrap简介:

    2. 快速入门

    3.演示案例

    4. 响应式布局

    5. CSS样式和JS插件


    1.Bootstrap简介:

    1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
        * 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
        * 好处:
            1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
            2. 响应式布局。
                * 同一套页面可以兼容不同分辨率的设备。

    2. 快速入门

        1. 下载Bootstrap:https://v3.bootcss.com/getting-started/#download


        2. 在项目中将这三个文件夹复制{css样式文件夹、js、fonts字体及图标文件夹}
        3. 创建html页面,引入必要的资源文件。如:jQuery

    3.演示案例

    <!DOCTYPE html>
    	<html lang="zh-CN">
    	<head>
    	    <meta charset="utf-8">
    	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	    <meta name="viewport" content="width=device-width, initial-scale=1">
    	    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    	    <title>Bootstrap HelloWorld</title>
    	
    	    <!-- Bootstrap -->
    	    <link href="css/bootstrap.min.css" rel="stylesheet">
            <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    	    <script src="js/jquery-3.3.1.min.js"></script>
    	    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    	    <script src="js/bootstrap.min.js"></script>
    	</head>
    	<body>
    	    <h1>你好,世界!</h1>
    	</body>
    	</html>

    4. 响应式布局

    同一套页面可以兼容不同分辨率的设备。
    * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
    * 步骤:
        1. 定义容器。相当于之前的table、
            * 容器分类:
                1. container:两边留白
                2. container-fluid:每一种设备都是100%宽度
        2. 定义行。相当于之前的tr   样式:row
        3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
            * 设备代号:
                1. xs:超小屏幕 手机 (<768px):col-xs-12
                2. sm:小屏幕 平板 (≥768px)
                3. md:中等屏幕 桌面显示器 (≥992px)
                4. lg:大屏幕 大桌面显示器 (≥1200px)

        * 注意:
            1. 一行中如果格子数目超过12,则超出部分自动换行。
            2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
            3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

    5. CSS样式和JS插件

    1. 全局CSS样式:
        * 按钮:class="btn btn-default"
        * 图片:
            *  class="img-responsive":图片在任意尺寸都占100%
            *  图片形状
                *  <img src="..." alt="..." class="img-rounded">:方形
                *  <img src="..." alt="..." class="img-circle"> : 圆形
                *  <img src="..." alt="..." class="img-thumbnail"> :相框
        * 表格
            * table
            * table-bordered
            * table-hover
        * 表单
            * 给表单项添加:class="form-control" 
    2. 组件:
        * 导航条
        * 分页条
    3. 插件:
        * 轮播图

     

    演示案例

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap HelloWorld</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
         <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="js/jquery-3.3.1.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"></script>
        <style>
            .paddtop{
                padding-top: 10px;
            }
            .search-btn{
                float: left;
                border:1px solid #ffc900;
                width: 90px;
                height: 35px;
                background-color:#ffc900 ;
                text-align: center;
                line-height: 35px;
                margin-top: 15px;
            }
    
            .search-input{
                float: left;
                border:2px solid #ffc900;
                width: 400px;
                height: 35px;
                padding-left: 5px;
                margin-top: 15px;
            }
            .jx{
                border-bottom: 2px solid #ffc900;
                padding: 5px;
            }
            .company{
                height: 40px;
                background-color: #ffc900;
                text-align: center;
                line-height:40px ;
                font-size: 8px;
            }
        </style>
    </head>
    <body>
    
       <!-- 1.页眉部分-->
       <header class="container-fluid">
           <div class="row">
               <img src="img/top_banner.jpg" class="img-responsive">
           </div>
           <div class="row paddtop">
               <div class="col-md-3">
                   <img src="img/logo.jpg" class="img-responsive">
               </div>
               <div class="col-md-5">
                   <input class="search-input" placeholder="请输入线路名称">
                   <a class="search-btn" href="#">搜索</a>
               </div>
               <div class="col-md-4">
                   <img src="img/hotel_tel.png" class="img-responsive">
               </div>
    
           </div>
           <!--导航栏-->
           <div class="row">
               <nav class="navbar navbar-default">
                   <div class="container-fluid">
                       <!-- Brand and toggle get grouped for better mobile display -->
                       <div class="navbar-header">
                           <!-- 定义汉堡按钮 -->
                           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                               <span class="sr-only">Toggle navigation</span>
                               <span class="icon-bar"></span>
                               <span class="icon-bar"></span>
                               <span class="icon-bar"></span>
                           </button>
                           <a class="navbar-brand" href="#">首页</a>
                       </div>
    
                       <!-- Collect the nav links, forms, and other content for toggling -->
                       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                           <ul class="nav navbar-nav">
                               <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                               <li><a href="#">Link</a></li>
                               <li><a href="#">Link</a></li>
                               <li><a href="#">Link</a></li>
                               <li><a href="#">Link</a></li>
                               <li><a href="#">Link</a></li>
    
                           </ul>
                       </div><!-- /.navbar-collapse -->
                   </div><!-- /.container-fluid -->
               </nav>
    
           </div>
    
           <!--轮播图-->
           <div class="row">
               <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                   <!-- Indicators -->
                   <ol class="carousel-indicators">
                       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                       <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                       <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                   </ol>
    
                   <!-- Wrapper for slides -->
                   <div class="carousel-inner" role="listbox">
                       <div class="item active">
                           <img src="img/banner_1.jpg" alt="...">
                       </div>
                       <div class="item">
                           <img src="img/banner_2.jpg" alt="...">
                       </div>
                       <div class="item">
                           <img src="img/banner_3.jpg" alt="...">
                       </div>
    
                   </div>
    
                   <!-- Controls -->
                   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                       <span class="sr-only">Previous</span>
                   </a>
                   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                       <span class="sr-only">Next</span>
                   </a>
               </div>
        </div>
    
     </header>
    <!-- 2.主体部分-->
       <div class="container">
            <div class="row jx">
                <img src="img/icon_5.jpg">
                <span>热门精选</span>
            </div>
    
           <div class="row paddtop">
               <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/jiangxuan_3.jpg" alt="">
                        <p>大连直飞青岛5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen; 699</font>
                    </div>
               </div>
               <div class="col-md-3">
                   <div class="thumbnail">
                       <img src="img/jiangxuan_3.jpg" alt="">
                       <p>上海直飞长春5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                       <font color="red">&yen; 699</font>
                   </div>
    
               </div>
               <div class="col-md-3">
    
                   <div class="thumbnail">
                       <img src="img/jiangxuan_3.jpg" alt="">
                       <p>北京直飞云南5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                       <font color="red">&yen; 699</font>
                   </div>
               </div>
               <div class="col-md-3">
    
                   <div class="thumbnail">
                       <img src="img/jiangxuan_3.jpg" alt="">
                       <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                       <font color="red">&yen; 699</font>
                   </div>
               </div>
               </div>
               <div class="row jx">
                   <img src="img/icon_6.jpg">
                   <span>国内游</span>
               </div>
               <div class="row paddtop">
                   <div class="col-md-4">
                       <img src="img/guonei_1.jpg">
                   </div>
                   <div class="col-md-8">
                       <div class="row">
                           <div class="col-md-4">
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
                           </div>
                           <div class="col-md-4">
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
    
                           </div>
                           <div class="col-md-4">
    
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
                           </div>
    
                       </div>
                       <div class="row">
                           <div class="col-md-4">
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
                           </div>
                           <div class="col-md-4">
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
    
                           </div>
                           <div class="col-md-4">
    
                               <div class="thumbnail">
                                   <img src="img/jiangxuan_3.jpg" alt="">
                                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                   <font color="red">&yen; 699</font>
                               </div>
                           </div>
                            </div>
    
               </div>
    
           </div>
       </div>
       <!-- 3.页脚部分-->
       <footer class="container-fluid">
           <div class="row">
               <img src="img/footer_service.png" class="img-responsive">
           </div>
           <div class="row company">
               CSDN博客杨校老师 版权所有Copyright 2017-2019, All Rights Reserved 鲁ICP备19007759号-1
           </div>
    
       </footer>
    </body>
    </html>  

    作者: 杨校

    出处: https://mryang.blog.csdn.net

    Java互联网交流学习群:827829292

    分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

    本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。

    展开全文
  • 15个最好的HTML5前端响应式框架(2014)

    千次阅读 2014-10-06 18:56:18
    文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它可以编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法,参见: LESS vs SASS?选择哪种CSS样式编程语言? 最好的...


     文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它可以编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法,参见: LESS vs SASS?选择哪种CSS样式编程语言?


    最好的HTML5框架一般也是最流行的,使用这些框架可以极大地减少你的工作量,节约你的时间。

    HTML5有非常有用和令人意想不到的功能,但也有少数浏览器并不支持HTML5,因此我们需要基于HTML5的前端响应式框架做跨浏览器的支持。这些HTML5的框架有很多,大多支持响应式布局,干净的代码,跨浏览器兼容,内置按钮等等这些设计师常常使用的功能。同的这些HTML5框架将帮助你更加容易地构建任务。包括支持javascirpt和jQuery插件的HTML5的框架,我们可以实现网站的许多应用效果。

    最好的响应式前端框架

    在这篇文章中,我将展示我收集的15款最佳的前端响应式HTML5框架。

    Foundation


    顾名思义,支持HTML5设备的基础。对于懒人们来说,我们已经建立了一个新的命令行工具来加速项目开发,并增加支持Libsass,SCSS编绎加快了5倍。

    skeljs


    skelJS是一个轻量极的前端框架,可以创建响应式网站和应用。 只需要引用一个不到20Kb的JS文件,然后就可以调用强大的组件。

    Gumby


    Gumby 2 是基于Sass创建的. 因为你可以使用它快速定制你所需要的Gumby框架组件。

    Grid System


    响应式式前端框架

    Less Framework 4


    Less框架是一套CSS网格系统,它有4套布局(layouts)和3组预设版式,都只基于一个网格。

    Yaml


    模块化的CSS框架,真正灵活,方便的响应式网站。 YAML提供了一套完整匹配的积木来创建复杂的网站。网格,导航,表格,排版模块和所有提供的附加组件无缝地在一起协同工作。

    HTML5 Boilerplate


    HTML5 Boilerplate帮助您构建快速,健壮,适应性强的Web应用程序或站点。

    Montage Studio


    MontageJS是一个现代化,完整的HTML5的框架,旨在创建单页的应用程序,快捷! MontageJS使用经过时间考验的设计模式和软件的原则,可以让你轻松地创建一个模块化的架构,并帮助您的项目提供高品质的用户体验。这允许设计人员和开发人员快速协同工作。

    Columnal


    该Columnal的CSS网格系统是一个“混合”的弹性网格,而一些代码的灵感(和想法子从960.gs(注*960 Grid为一开源项目)获取

    Layers CSS


    Layers CSS是一个轻量级的CSS框架,它不强调任何设计,只处理的主体结构。它即支持响应的布局又有流式网格和简单。

    Twitter Bootstrap


    Bootstrap 是一种流行的,现代的前端/ UI开发框架。它的功能丰富,大部分你所需要的功能里面都有。

    SproutCore


    SproutCore的是基于网络的创新用户体验的开源框架。它具有令人难以置信的速度意味着没有更短的页面渲染时间。利用最新的Web技术和规范。良好的可访问性。

    HTML KickStart


    最新的一个框架,HTML5的KickStart的是一个非常干净的HTML,CSS, JavaScript包,以节省UI开发人员的工作。

    CreateJS


    CreateJS是一套开源的JavaScript库和工具,用于创建丰富的,交互式的HTML5内容。它由5个模块化的JavaScript库组成。这将帮助你实现动画效果,在您的网站上支持HTML5的音频,等等。

    52Framework


    52Framework是一个HTML5的框架,其目的是提供一种简单的方法来构建使用HTML5和CSS3,同时支持所有现代浏览器响应网站。它是挤满了像HTML5视频播放器,圆角,HTML5 Canvas及HTML5验证等等优秀的组件。




    展开全文
  • 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架。只是简单了解过,没真正实践啊,bootstrap比我想象的要好用的多。关键是,关键来了…… app端是只有手机的,pc基本上木有。那就是...

    写phpd的我。最近公司要弄个app关键是没有web开发,而我有比较闲,那就扛枪上阵吧。

    响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架。只是简单了解过,没真正实践啊,bootstrap比我想象的要好用的多。关键是,关键来了……

    app端是只有手机的,pc基本上木有。那就是说只能按照手机端开发,那么boostrap响应式布局就不适用于app了(反正我是做了一套半成品,被推翻了)。不能愉快的工作了,好不淡定的时间。。百度,百又问问同事,发现了amaze ui也就是妹子框架,终于可以省事了,太高兴了。

    amaze框架下载后是一套让人极其郁闷的示例包,文件引入是分开来介绍的,如果你不仔细看文档,会很痛苦的(因为我就是如此,好折磨人)。

    好了附上amaze的引入文件,仅供大伙参考。

    对了手机端要在头部加上这句话

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    一切就绪,那就直奔主题。

    手机端目前最低宽度是300.不过说实话智能手机300的屏幕估计是木有,那就按iphone4的320来设计web。那么问题来了,设计给的参考图示640的肿么办,所有的像素除以2,一切解决。

    使用amaze框架并不能很好的解决不同分辨率的像素问题,而且最苦逼的就是要设置好多@media only screen and (min-width:320px) and (max-width:480px) {}屏幕范围样式。太痛苦了,受不了。。有木有一种可以控制的方法呢,京东是怎么弄的?小米又是怎么弄的?百度吧,一切从度娘中找答案。

     

    答案好多,慢慢筛选吧……

     

    于是找到这段代码

     

    那么问题来了,这只是页面的,我想要所有的地方在不同尺寸的浏览器都能自适应,怎解决?

    clientwidth是获取屏幕显示的宽度,设定最小屏幕为320,以320为基础,那么最小最字体就是12px。于是就有了改动。

     

    好了这下子无论什么浏览器都是以最宽320,最小12px为基准。接着还有个问题,所有布局改用什么单位?px/em/pt/rem

    px是最精确的单位,固定值。em值不固定,继承父元素。rem在设定元素时仍是相对大小,但相对的是html根元素。pt就是印刷业上的单位,不过app开发中也用到。

    那么好了,该用哪种的呢,我们先来看看上面的自适应js执行效果。

    在html元素中生成了一个行内字体样式,答案就有了吧。

     

    转载请注明出处:  web前端响应式布局,自适应所有分辨率艾瑞可erik(http://www.erik.xyz/)

    展开全文
  • 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架。仅仅是简单了解过,没真正实践啊。bootstrap比我想象的要好用的多。关键是。关键来了…… app端是仅仅有手机的,pc基本上木有。那...
  • Bootstrap 都是易用、强大且灵活的前端框架,用于构建基于任何设备上的 Web 应用。提供流式布局,及多种 js UI 组件,如导航、表单、按钮、Tabs 等等。 如果是基于移动优先的原则(Mobile First), 建议选择...
  • 本文中,我们为大家收集了有关前端设计的9个非常有用的响应式框架。在过去的几年中响应式框架已经出现,如今它已经变得越来越普遍。因此,我们收集这些响应式框架来为您服务,希望当您在设计前端时这些框架能帮助到...
  • 14个响应式前端开发框架。几乎所有的框架都采用了响应式网格系统。  使用这些前端框架,有如下好处:  跨浏览器。这一点已被证实。  一致性。UI组件,如导航、按钮、标签、表单、下拉框、表格……,在设计上保持...
  • 共26课前端教程含pdf和源码下载地址:百度网盘
  • 响应式WebUI框架整理

    千次阅读 2017-06-21 19:24:24
    响应式Web框架整理汇总
  • 14款响应式前端开发框架

    千次阅读 2013-07-25 15:27:41
    摘要:使用前端开发框架可以大大简化开发过程,所开发网站具有跨浏览器、一致性、响应式等特点。本文收集了14款响应式前端开发框架,且分别指出所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格...
  • Bootstrap 前端框架制作响应式网站

    千次阅读 2017-05-03 22:39:27
    放假突然兴起,想学点前端框架,制作一个页面玩玩(PS:一直做后端,怕忘了前端的知识,所以补一补)。说做就做,花了一天的时间做了个响应式小网页,可以兼容浏览器,也可以放在移动设备上使用。废话不多说,上成果! ...
  • 响应式框架推荐

    千次阅读 2016-09-19 12:00:07
    对于用习惯了Bootstrap开发页面的程序员来说,很多成都上bootstrap就已经足够满足需求了,响应式Web设计不仅能够让页面适应屏幕尺寸还能给用户带来完美的体验,下面是从网上获取的资源对几款响应式框架的一个介绍,...
  • Web前端js框架汇总

    2017-03-28 15:36:01
    web前端js框架汇总
  • 前端开发并不是一个容易的工作,不仅...本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系
  • web前端框架

    千次阅读 2014-07-28 15:02:55
    前端开发并不是一个容易的工作,不仅需要...本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式
  • Web前端框架

    2014-09-23 20:50:54
    作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计。...1、Bootstrap – 最流行的Web前端UI框架 Bo
  • Web前端热门框架大全

    千次阅读 2019-11-15 16:16:32
    ********前端热门JavaScript框架的分析**** ...Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库...
  • web前端开发将成为2020年技术领域最热门的学科之一。以前,前端空间的开发人员只要了解一些HTML,CSS,也许还有jQuery来创建交互网站,就足够了。但是今天,他们面临着广泛且不断变化的开发技能生态系统;最近几年...
  • 25款最佳响应式HTML5前端开发框架

    万次阅读 2017-05-21 17:05:06
    25款最佳响应式HTML5前端开发框架,供你挑选,一个好的界面不是梦。
  • 那么Web前端三大主流框架是什么呢? 一、Web前端三大主流框架是什么 React:  1.声明设计:React采用声明范式,可以轻松描述应用。  2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。  3.灵活...
  • 那么Web前端三大主流框架是什么呢? 一、Web前端三大主流框架是什么 React: 1.声明设计:React采用声明范式,可以轻松描述应用。 2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。 3.灵活:Reac....
  • Web前端开发框架对比

    千次阅读 2016-05-31 11:14:30
     Bootstrap(http://www.bootcss.com)是目前桌面端最为流行的开发框架,一经 Twitter 推出,势不可挡。Bootstrap 主要针对桌面端市场,Bootstrap3 提出移动优先,不过目前桌面端依然还是 Bootstrap 的主要目标...
  • web前端常用框架总结

    千次阅读 2017-01-25 15:39:15
    web框架 目前主流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,获得了用户的广泛好评。国内的一些框架很多也是仿照 jQuery 对 JavaScript 进行了包装,不过这些框架的鼻祖 YUI 还是坚持用自己的 ...
  • Gumby Framework   ...Gumby 2是建立在Sass基础上的。...Gumby 2是一个非常棒的响应式CSS框架。   Get UI Kit Get UI Kit是一款轻量级、模块化的前端框架,用于开发快四且强大的Web界面
  • 2019年web前端框架排行

    千次阅读 2019-08-16 16:28:01
    然后就是各种源源不断的关于web前端技术的问题讨论。然而,对于新手的前端小白来说,估计这样的问题会引发一系列问题:“前端框架是什么?“前端框架有什么用?前端框架都有那些?  简而言之,前端框架是已经建立起来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,109
精华内容 18,443
关键字:

web前端响应式框架