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具体用法百度一下 网上好多的

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值