移动优先的响应式布局

番茄西红柿发布于2019-04-23 13:43 / 1548人阅读

摘要：虽然兼容性方案的体验不如常规方案，但保证了功能可用性移动优先的响应式布局采用的是渐进增强原则，制作响应式网站时，先搞定手机版，然后再去为更大设备去设计和开发更复杂的功能。

前面的话

　　随着移动互联网的兴起，不同设备的分辨率相差较大，如果在不同的设置上显示同一个页面，则用户体验差。响应式网页设计是一种方法，使得一个网站能够兼容多个终端，而不用为每个终端制作特定的版本。它使得一个网站可以在任何类型的屏幕上，都可以被轻松地浏览和使用。采用响应式设计，在不同设备中，网站会重新排列，展现出不同的设计风格，以完美的适配任何尺寸的屏幕

设计原则

　　关于响应式设计，有渐进增加和优雅降级两个设计原则

　　渐进增强(progressive enhancement)，是指基本需求得到满足、实现，再根据不同浏览器及不同分辨率设备的特点，利用高级浏览器下的新特性提供更好的体验。比如，圆角、阴影、动画等

　　优雅降级(graceful degradation)则正好相反，现有功能已经开发完备，但需要向下兼容版本和不支持该功能的浏览器。虽然兼容性方案的体验不如常规方案，但保证了功能可用性

　　移动优先的响应式布局采用的是渐进增强原则，制作响应式网站时，先搞定手机版，然后再去为更大设备去设计和开发更复杂的功能。特征是使用min-width匹配页面宽度。从上到下书写样式时，首先考虑的是移动设备的使用场景，默认查询的是最窄的情况，再依次考虑设备屏幕逐渐变宽的情况

　　由简入繁易，由繁入简难。如果是桌面优先，布局端是桌面端代码，只有在media中，才是手机端代码，加载了多余的桌面端代码。如果是图片文件，则下载的无用资源更多

　　无论从界面设计还是代码执行效率的角度而言，移动优先都有明显优势

三要素

　　响应式设计包括三个要素：弹性布局、媒体查询和弹性图片

　　弹性布局和媒体查询已经在其他博客中详细介绍，下面来重点介绍下弹性图片

　　弹性图片，也称为响应式图片，是指图片能够跟随父容器宽度变化而变化，同时宽度受限于父容器，不可按照图片原始尺寸展现

　　因此，最简单的响应式图片设置max-width为100%即可

img{
  max-width: 100%;  
}

　　只有一张图片的情况下，采用上面代码即可。如果提供了高清图，要根据设备大小加载不同的图片，则需要额外的处理。有如下几种处理方式

　　1、采用picture元素，IE浏览器、android4.4.4-浏览器不兼容


  "(min-width:50em)" srcset="img/l.jpg">
  "(min-width:30em)" srcset="img/m.jpg">
  "img/s.jpg" alt="#">

　　2、采用img元素的srcset和sizes属性，IE浏览器、android4.4.4-浏览器不兼容

<img
  src="img/480.png"
  srcset="img/480.png 480w,img/800.png 800w, img/1600.png 1600w"
  sizes="(min-width:800px) 800px,100vw"
/>

　　3、采用js，根据window的resize事件，修改图片的路径

function makeImageResponsive(){
    var width = $(window).width();
    var img = $(.content img);
    if(width <=480){
        img.attr(src,img/480.png);
    }else if(width <=800){
        img.attr(src,img/800.png);
    }else{
        img.attr(src,img/1600.png);
    }
}
$(window).on(resize load,makeImageResponsive);

　　4、后端配置，前端传递给后端当前设备的一些特征，后端通过这些特征决定做怎样的响应。但目录两个后端响应式解决方案Responsive_Images和Adaptive-Images都不再维护

优缺点

【优点】

　　1、减少工作量，网站、设计、代码、内容都只需要一份

　　2、节省时间

　　3、解决了设备之间的差异化展示

　　4、搜索优化　

　　5、更好的用户体验

【缺点】

　　1、需要加载更多的样式和脚本资源，加载速度受到影响

　　2、设计比较难精确定位和控制

　　3、老版本浏览器兼容不好

响应模式

　　下面介绍四种响应模式

【Column Drop 列下沉】

　　手机上每一个大块多带带占据一行，随着屏幕尺寸拉伸会在同一行上形成多个 column 列

【Mostly Fulid 基本流体式】

　　基本上跟 Column Drop 一样，但是有一点点“固定布局“的特点：当到达一定宽度后，主体内容部分不再变宽，成为固定宽度

【Layout Shifter 变换式】

　　变换式，也就是不必遵循原有内容顺序，可以根据最佳展示需要来调整大块顺序

【Off Canvas 抽屉式】

　　抽屉式，屏幕不够宽的时候，隐藏，通过按钮呼出。足够宽的屏幕上，始终显示

idc机房托管专线服务响应式布局 asp如何响应式布局 html响应式导布局最高响应比优先调度算法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2262.html

CSS5:移动端页面(响应式)

摘要：接下来做端一般都写手机最大也就先隐藏手机菜单和按钮优先级问题解决方法直接使用用谷歌开发者工具查看优先级里面的垂直居中再把写成布局只要改成里面的子项目就变成一行了菜单导航导航导航导航导航到航导航导航导航导航方法切换元素的可见状态。 CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你...

superPershing 2019-08-30 15:53 评论0 收藏0
重温"什么是响应式网页设计？响应式布局的实现原理"

摘要：概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年，移动互联网的数据流量将超越端的流量。概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是...

Nekron 2019-08-29 12:28 评论0 收藏0
重温"什么是响应式网页设计？响应式布局的实现原理"

摘要：概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年，移动互联网的数据流量将超越端的流量。概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是...

Joyven 2019-08-01 16:43 评论0 收藏0
Are you sure you understand the responsive layout？

摘要：我们推荐使用作为字体单位默认情况下我们标签的为，我们可以利用媒体查询，设置在不同设备下的字体大小百分比布局用过的同学都知道，它里面有个栅格系统，说白了就是利用百分比来定义我们元素宽高，而不直接使用。曾几何时我认为使用了媒体查询就是响应式布局，这种理解实在是太浅薄了，今天就让我们重新来认识下什么是响应式布局查看demo 查看源码，欢迎star 什么是响应式布局前几年风靡一时Boot...

Shisui 2019-08-29 16:22 评论0 收藏0
Are you sure you understand the responsive layout？

摘要：我们推荐使用作为字体单位默认情况下我们标签的为，我们可以利用媒体查询，设置在不同设备下的字体大小百分比布局用过的同学都知道，它里面有个栅格系统，说白了就是利用百分比来定义我们元素宽高，而不直接使用。曾几何时我认为使用了媒体查询就是响应式布局，这种理解实在是太浅薄了，今天就让我们重新来认识下什么是响应式布局查看demo 查看源码，欢迎star 什么是响应式布局前几年风靡一时Boot...

Hydrogen 2019-08-05 18:05 评论0 收藏0