初探响应式Web设计_html/css_WEB-ITnose

公司书柜有本《响应式Web设计：HTML5和CSS3实战》，大概就认真看了前面几章，后面大部分介绍css3（随便找本手册都可以了要你可用！）

《响应式Web设计：HTML5和CSS3实战》

移动优先的跨终端 Web 天猫 前端 @徐凯-鬼道 W3CTECH 2013 http://luics.com/demo/cew-w3ctech-1311/#/

响应式布局 设计思想 概念

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端??而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

优点和缺点

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

根据不同的宽度进行识别,css3 media, 字体rem 按照根元素进行放大,避免css sprite按钮等,不然要使用图片缩放进行设置

设计思想

mobile frist (移动优先)

A级必须兼容, 简单来说比较普遍是 最低兼容 480 768 1024 这三个分别率,现在还有 1280 1960 等等级别要考虑(4k等等还是需要media进行选择

media ie8-6不支持可以使用respond令到其支持,不过 不需要(ie8以下就给他使用默认css,不必太友善对待,必须要兼容可以考虑使用Respond.js

内容优先是 响应式的第二个思想,让主体内容首先显示,还有是对应部分次要模块进行修正排版显示在后面。

例子就看我博客就可以了！（改版之后再说）

1200-1920（固定1200）（主要桌面级 对于4k设备暂时还未考虑）

1200-1024（固定1000）（旧pc和平板）（ie6-8不支持响应式也默认这个宽度，然而对应太过老旧的东西我个人是不想做的）

768（768-1000）（宽99%）（个人确实不喜欢满屏）

上面只是兼容 完全无说到内容优先吧客官稍慢，现在上菜

480-768 对应左右模块放在一起显得会太过紧凑，针对移动设备 把主题内容优先，所以文章列表在上面 日期公告就被我放置在列表到下面，（其实思想就是这么简单）

简单的响应式布局

根据宽度来变颜色

.content{

color: #123;

border: 1px solid #123;

width:98%;

margin: 0 auto;

}

@media screen and (max-width:1024px){

.content{

color: orange;

border: 1px solid orange;

width:95%;

}

}

@media screen and (max-width: 768px){

.content{

color: red;

border: 1px solid red;

width:98%;

}

}

@media screen and (max-width: 480px){

.content{

color: green;

border: 1px solid green;

width: 95%;

}

}

宽度

媒体查询能检测那些特性

? width：视口宽度。

? height：视口高度。

? device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。

? device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。

? orientation：检查设备处于横向还是纵向。

? aspect-ratio：基于视口宽度和高度的宽高比。一个16∶9 比例的显示屏可以这样定义aspect-ratio: 16/9。

? device-aspect-ratio：和aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。

? color：每种颜色的位数。例如min-color: 16 会检测设备是否拥有16 位颜色。

? color-index：设备的颜色索引表中的颜色数。值必须是非负整数。

?monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2。

? resolution：用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。

? scan：电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）。如720p HD 电视（720p 的p 即表明是逐行扫描）匹配scan: progressive，而1080i HD 电视（1080i 中的i 表明是隔行扫描）匹配scan: interlace。

? grid：用来检测输出设备是网格设备还是位图设备。在上述所有特性中，除scan 和grid 之外，都可使用min 和max 前缀来创建一个查询范围。例如，分析如下所示的代码片段：

? @import url("phone.css") screen and (min-width:200px) and (max-width:360px);这里对width 应用了min 和max 来设定查询范围。这样phone.css 文件只会引入视口宽度介于200 像素至360 像素的显示屏设备。

根据上述可以先写一个无media的css 让一些低端浏览器去读取,大概就是1024等级用户,后面使用media 对其他分辨率进行覆盖重写.

阻止移动浏览器缩放

插入

viewport 视觉

initial-scale 初始化倍数2.0为放大倍数

width 屏幕宽度

initial-scale 初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。

maximum-scale 最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

user-scalable 用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

还有minimum-scale 最小缩放倍数

移动设备的一些meta

Web应用 全屏模式运行content ="yes|no" 默认no

Web应用 状态栏（屏幕顶部栏）的样式

content ="default|blank|black-transparent|blank-translucent "

default：默认显示 blank:黑色black-transparent：黑色透明blank-translucent：黑色半透明

识别页面中的电话号码。content="telephone=yes|no"

禁用链接高亮（主要是ie和Safari 对于超链接被触摸的时候显示的高亮）

把流式布局应用到响应式设计

流式布局的必记的公式: 目标宽度像素/上下文宽度像素=百分比

简单来说就是布局是 目标元素的宽度/父亲元素的宽度得出百分比;对应字体也可以套用公式就是需要主要字体的百分比的计算方式(像素是设计图的像素)

最外层的百分比body 这一类,90%-100% 凭着观感

因为是按照父亲元素来计算

布局宽度转换

按照公式转换为 940/960=0.9791666666666667

字体宽度转换

em来替换px,现在也有rem新的标签,

em是根据父元素的进行缩放,倍数缩放

按照公式转换为 48/16=3

rem是根据根元素进行缩放

转换 非常方便计算(个人也是推荐,ie8以下不支持要兼容写法 先写px再写rem 覆盖 48/10=4.8

图片转换

公式和上面一样只是给图片限制了一个最大宽度(就是图片本来的宽度该设计概念也同样应用到body的宽度 从而达到良好的用户体验

服务器也提供自适应图片选择加载对应的图片

图片的存放地址 asset bkg的文件夹图片不会缩，反而特定的文件夹的图片才会缩放

网格系统

存在很多网格系统可以进行快速搭建, 比较响应式框架就是使用这些

响应式视频

对于iframe的视频对应加载适应的框架进行解决 FitVids

PS：还有一些设备之类还未有任何兼容，其实响应式就是为了一个页面支持更多的设备，更有利于SEO，但是桌面的设备所追求的效果和移动设备还有有挺大区别，响应式的缺陷可能就在这里。

可以观摩一下淘宝 腾讯 百度首页，他们都会专门做了移动端页面 pad页面（毕竟效果和体现会更好），但是他们的活动页 游戏页 却不会为此而做一个其他端的页面，直接响应式为主。

还可以补充一下 可以试试对应的2k 4k屏对于 淘宝 腾讯 百度首页进行测试，

发现都不太好；‘坑’还有所需慢慢填

转载请保留源地址，谢谢