初探响应式Web设计
公司书柜有本《响应式Web设计：HTML5和CSS3实战》，大概就认真看了前面几章，后面大部分介绍css3（随便找本手册均可以了要你可用！）css
《响应式Web设计：HTML5和CSS3实战》html
移动优先的跨终端 Web 天猫 前端 @徐凯-鬼道 W3CTECH 2013 http://luics.com/demo/cew-w3ctech-1311/#/前端
响应式布局 设计思想 概念
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站可以兼容多个终端——而不是为每一个终端作一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。css3
响应式布局能够为不一样终端的用户提供更加温馨的界面和更好的用户体验，并且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着愈来愈多的设计师采用这个技术，咱们不只看到不少的创新，还看到了一些成形的模式。web
优势和缺点chrome
优势：浏览器
面对不一样分辨率设备灵活性强服务器
可以快捷解决多设备显示适应问题app
缺点：框架
兼容各类设备工做量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
必定程度上改变了网站原有的布局结构，会出现用户混淆的状况
根据不一样的宽度进行识别,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 对应左右模块放在一块儿显得会太过紧凑，针对移动设备 把主题内容优先，因此文章列表在上面 日期公告就被我放置在列表到下面，（其实思想就是这么简单）
简单的响应式布局
根据宽度来变颜色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Design</title>
<style>
.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%;
}
}
</style>
</head>
<body>
<div class="content">宽度</div>
</body>
</html>
媒体查询能检测那些特性
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 对其余分辨率进行覆盖重写.
阻止移动浏览器缩放
插入
<meta name="viewport" content="initial-scale=2.0,width=device-width">
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
<meta name="apple-mobile-web-app-capable" content="yes"/>
Web应用 全屏模式运行content ="yes|no" 默认no
<meta name="apple-mobile-web-app-status-bar-style" content="black-transparent"/>
Web应用 状态栏（屏幕顶部栏）的样式
content ="default|blank|black-transparent|blank-translucent "
default：默认显示 blank:黑色black-transparent：黑色透明blank-translucent：黑色半透明
<meta name="format-detection" content="telephone=yes"/>
识别页面中的电话号码。content="telephone=yes|no"
<meta name="msapplication-tap-highlight" content="no"/>
禁用连接高亮（主要是ie和Safari 对于超连接被触摸的时候显示的高亮）
把流式布局应用到响应式设计
流式布局的必记的公式: 目标宽度像素/上下文宽度像素=百分比
简单来讲就是布局是 目标元素的宽度/父亲元素的宽度得出百分比;对应字体也能够套用公式就是须要主要字体的百分比的计算方式(像素是设计图的像素)
最外层的百分比body 这一类,90%-100% 凭着观感
由于是按照父亲元素来计算
布局宽度转换
<div style="width:960px"><div style="width:940px"> </div> </div>
按照公式转换为 940/960=0.9791666666666667
<div style="width:960px"><div style="width: 97.91666666666667%"> </div> </div>
字体宽度转换
em来替换px,如今也有rem新的标签,
em是根据父元素的进行缩放,倍数缩放
<div style="font-size:16px"><div style=" font-size:48px "> </div> </div>
按照公式转换为 48/16=3
<div style="font-size:16px"><div style=" font-size:3em "> </div> </div>
rem是根据根元素进行缩放
<body style="font-size:10px"><div style="font-size:16px"><div style=" font-size:48px "> </div> </div></body>
转换 很是方便计算(我的也是推荐,ie8如下不支持要兼容写法 先写px再写rem 覆盖 48/10=4.8
<body style="font-size:10px"><div style="font-size:1.6rem"><div style=" font-size:4.8rem"> </div> </div></body>
图片转换
公式和上面同样只是给图片限制了一个最大宽度(就是图片原本的宽度该设计概念也一样应用到body的宽度 从而达到良好的用户体验
服务器也提供自适应图片选择加载对应的图片
图片的存放地址 asset bkg的文件夹图片不会缩，反而特定的文件夹的图片才会缩放
网格系统
存在不少网格系统能够进行快速搭建, 比较响应式框架就是使用这些
响应式视频
对于iframe的视频对应加载适应的框架进行解决 FitVids
PS：还有一些设备之类还未有任何兼容，其实响应式就是为了一个页面支持更多的设备，更有利于SEO，可是桌面的设备所追求的效果和移动设备还有有挺大区别，响应式的缺陷可能就在这里。
能够观摩一下淘宝 腾讯 百度首页，他们都会专门作了移动端页面 pad页面（毕竟效果和体现会更好），可是他们的活动页 游戏页 却不会为此而作一个其余端的页面，直接响应式为主。
还能够补充一下 能够试试对应的2k 4k屏对于 淘宝 腾讯 百度首页进行测试，
发现都不太好；‘坑’还有所需慢慢填
转载请保留源地址，谢谢
- 1. 响应式Web设计（二）：响应式Web设计的概念
- 2. 响应式Web设计（一）：响应式Web设计的背景
- 3. 响应式Web设计（三）：响应式Web设计的方法
- 4. 响应式Web设计（四）：响应式Web设计的优化
- 5. 响应式设计初识
- 6. 响应式WEB设计
- 7. 响应式Web设计
- 8. HTML 响应式 Web 设计
- 9. 响应式web设计（一）
- 10. 前端设计 响应式设计_响应式响应设计
- 更多相关文章...
- • Web 创建设计 - 网站建设指南
- • 如何伪造ARP响应？ - TCP/IP教程
- • IntelliJ IDEA代码格式化设置
- • 使用Rxjava计算圆周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 响应式Web设计（二）：响应式Web设计的概念
- 2. 响应式Web设计（一）：响应式Web设计的背景
- 3. 响应式Web设计（三）：响应式Web设计的方法
- 4. 响应式Web设计（四）：响应式Web设计的优化
- 5. 响应式设计初识
- 6. 响应式WEB设计
- 7. 响应式Web设计
- 8. HTML 响应式 Web 设计
- 9. 响应式web设计（一）
- 10. 前端设计 响应式设计_响应式响应设计