web响应式网站设计

随着时间的推移老旧的IE6、7、8的使用的人越来越少，而移动设备浏览器的使用越来越多。很多人特别是年轻人开始习惯用手机等移动设备访问网页，如果为正常的写一遍又为移动端写一遍耗时又耗力，所以响应式网站开始成为必然。

我对响应式的理解为不同设备访问相同网站返回不同内容。让我想到了java中的动态调用。

接下来进入正题：

（1）媒体调用

           css3中@media来进行媒体查询

           

        可 查询内容如下：

                width：视口宽度

              height：视口高度

             device-width：屏幕宽度

            device-height：屏幕高度

            orientation：横纵检测

            aspect-ratio:视口宽高比例   例如    aspect-ratio：16/9

           device-aspect-ratio：屏幕宽高比例

            color：颜色位数

           color-index：颜色索引表中颜色数

           monochrome：单色帧缓冲区颜色数

           resolution：屏幕或打印机分辨率

            scan：电视机扫描方式

            grid：网格设备还是位图设备

          虽然有这么多属性可以检测但是常用的是width和device-width

检测方式：

         

经典公式：目标元素宽度/上下文元素宽度=百分比宽度

                    抛去从前的像素px吧，换成百分比，用百分比替代宽度等，用em代替font-size中的px，使你的网页充满活力。

在所有之前应该添加<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">阻止移动设备浏览器自动调整页面大小

或者使用<meta name="viewport" content="width=device-width, initial-scale=1.0">

介绍一些css网格系统快速开发响应式网站：Semantic、Skeleton、Less Framework、1140 CSS Grid、Col一些帮助跨浏览器umanl

IE6、7、8中基本不支持css3这里介绍跨浏览器问题Modernizr.js和Respond.js具体用法百度一下 网上好多的

最后想说的是无论怎么设计都要以内容优先