响应式网页布局实现方法的原则

交互设计者必须满足不同分辨率和设备的页面布局的显示方式。另一方面，视觉设计师要考虑页面性能和移动带宽问题，权衡页面的炫酷效果和视觉色彩的使用。前后端开发工程师既要满足视觉要求和交互功能，又要考虑页面加载性能和带宽消耗问题，更重要的是移动端的安全性能！既然响应式网页设计涉及到这么多方面，那么我们应该如何实现这样的页面呢？对此，我还专门收集了一些响应式网页的实现方法。首先，要遵循移动优先的原则。交互和设计要基于移动端，PC端作为移动端的延伸；一个页面需要兼容不同的终端，所以有两个关键点是我们需要响应式的：响应式布局和响应式内容（图片、多媒体）。1.响应式布局如果我们需要在竖屏和横屏中兼容不同的屏幕分辨率、分辨率、屏幕方向，如何让一个设计方案满足所有情况？对此，马海翔认为我们的布局应该是弹性网格布局，可以灵活适应不同的尺寸，比如下页不同尺寸下各个模块的位置：那我们具体怎么做呢？1.Meta标签定义使用viewportmeta标签控制手机浏览器的布局通过快捷方式打开隐藏状态栏iPhone会在电话连接中添加一个看起来像电话号码的数字，应该关闭它2.使用MediaQueries适配相应的样式，常用于layoutCSSMediaQueries有以下几种类型：devicetype（媒体类型）：all所有设备；screencomputermonitor；printpaperorprint预览视图；手持便携设备；tv电视类型设备；语音语义和音频盒转化为盲文盲文触觉反馈设备；浮雕盲文打印机；投影各种投影设备；使用固定的tty媒体-密度字母网格，如电传打字机和终端。设备特性（mediafeature）：width浏览器宽度；浏览器高度；device-width设备屏幕分辨率的宽度值；device-height设备屏幕分辨率的高度值；orientation浏览器窗口的方向是垂直还是水平，当窗口的高度大于等于宽度时，该属性值为portrait，否则为landscape；aspect-ratio值，浏览器的纵横比；device-aspect-ratio值，屏幕的纵横比。示例：/*对于240px宽度的屏幕*/@mediaonlyscreenand(max-device-width:240px){selector{...}}/*对于320px宽度的屏幕*/@mediaonlyscreenand(min-device-width:241px)and(max-device-width:320px){selector{...}}/*for480pxwidthscreen*/@mediaonlyscreen(min-device-width:321px)and(max-device-width:480px){　　selector{...}}适用于layoutMediaQueries，马海翔博客这里就不赘述了，感兴趣的可以通过官方文档了解更多。3、表格的响应式处理那么表格的响应式处理应该是什么样的呢？怎样才能突破Table的局限呢？下面我们来了解下表格响应式处理的几种方法：(1)、隐藏不重要的数据列处理前：(点击查看大图)处理后：实现方法代码：@mediaonlyscreenand(max-width:800px){　　tabletd:nth-child(2),　　tableth:nth-child(2){display:none;}}@mediaonlyscreenand(max-width:640px){　　tabletd:nth-child(4),tableth:nth-child(4),　　tabletd:nth-child(7),tableth:nth-child(7),　　tabletd:nth-child(8),th:nth-child(8){display:none;}}站在用户的角度思考，每个人对数据的认知不同，可能你隐藏的数据对他来说很重要，所以马海翔做不推荐这种方法。(2)、多列水平变为2列垂直处理前：处理后：实现方式：定位隐藏，改变块元素，并绑定对应的列名，然后使用内容伪元素：attr(data-th)实现:(3)，固定第一列，水平滚动其余列处理前：处理后：实现原理代码：thead{float:left;}tbody{显示：块；宽度：自动；overflow-x:auto;}二、响应式内容1、响应式图片带宽是移动端的硬伤。如果我们只对页面布局做响应式处理，当我们用手机端访问时，请求的图片还在PC端。大图；文件大，流量大，请求延时长，造成的问题不可估量。然后我们要把图片处理成响应式图片，根据终端类型、尺寸和分辨率适配合理的图形。处理原理：浏览器获取用户终端的屏幕尺寸和分辨率，经过逻辑处理后输出合适的图片。比如屏幕分辨率是320*480，那么我们就给它匹配一张宽度应该小于320px的图片。如果终端屏幕的DPI（devicepixels）DPI详细值很高，也就是高清屏幕，那我们就得输出2倍分辨率的图形（width:640px）；确保高清屏幕下图形的清晰度。各种移动终端的屏幕参数可以通过http://screensiz.es/phone查询。解决方案：其实W3C对于响应式图形已经有了一个草案：新定义标签，因为只是一个草案，目前还没有支持的浏览器，期待在不久的将来使用。虽然目前不支持，但让我们看一下，为以后的内容做铺垫。是一个图形元素，内容由多张源图片组成，通过CSSMediaQueries适配合理的图形。代码规范如下：　　　　

无障碍文本