响应式网页布局的实现方法原理.docx

响应式网页布局的实现方法原理交互设计师，要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师，则要考虑到页面性能和移动端带宽问题，权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师，则要完成满足视觉需求和交互功能，更要考虑到页面加载性能和消耗带宽问题，更重要的是移动端安全性能方面！作者：马海洋来源：马海洋博客|2016-12-21 14:35?收藏??分享推广 | 令人窒息的奖品等你—2016最权威的全球开发者调研交互设计师，要满足各自不通分辨率和设备的页面布局展现方式。而视觉设计师，则要考虑到页面性能和移动端带宽问题，权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师，则要完成满足视觉需求和交互功能，更要考虑到页面加载性能和消耗带宽问题，更重要的是移动端安全性能方面！既然响应式网页设计牵涉到了这么多的方方面面，那我们又该如何去实现这种页面呢？对此我也特意收集了一些响应式网页的实现方法原理首先我们应该遵循移动优先原则，交互和设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）。一、响应式布局如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？对此，马海祥觉的我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不同尺寸下的位置：那么我们具体要怎么做呢？1、Meta标签定义使用 viewport meta 标签在手机浏览器上控制布局meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1 /通过快捷方式打开时全屏显示meta name=apple-mobile-web-app-capable content=yes /隐藏状态栏meta name=apple-mobile-web-app-status-bar-style content=blank /iPhone会将看起来像电话号码的数字添加电话连接，应当关闭meta name=format-detection content=telephone=no /2、使用Media Queries适配对应样式常用于布局的CSS Media Queries有以下几种：设备类型(media type):all所有设备；screen 电脑显示器；print打印用纸或打印预览视图；handheld便携设备；tv电视机类型的设备；speech语意和音频盒成器；braille盲人用点字法触觉回馈设备；embossed盲文打印机；projection各种投影设备；tty使用固定密度字母栅格的媒介，比如电传打字机和终端。设备特性(media feature):width浏览器宽度；height浏览器高度；device-width设备屏幕分辨率的宽度值；device-height设备屏幕分辨率的高度值；orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；aspect-ratio比例值，浏览器的纵横比；device-aspect-ratio比例值，屏幕的纵横比。例子：/* for 240 px width screen */@media only screen and (max-device-width:240px){?selector{ ... }}/* for 320px width screen */@media only screen and (min-device-width:241px) and (max-device-width:320px){?selector{ ... }}/* for 480 px width screen */@media only screen (min-device-width:321px)and (max-device-width:480px){?selector{ ... }}适用于布局的Media Queries，这里在马海祥博客上我们就不再做详述，有兴趣的话，可通过官方文档进一步了解。3、表格(table)的响应式处理那么对于表格(table)的响应式处理该是怎样的呢？我们该如何突破Table的局限性呢？接下来我们来了解以下的几种针对表格响应式处理的方法：（1）、隐藏不重要数据列处理前：（点击查看大图）处理后：实现方法代码：@media only screen and (max-width: 800px) {?table td:nth-ch