概况

记录在学习响应式布局时学到的只是点。

响应式网站概念

flexible grid layout 弹性网格布局
flexible image 弹性图片
media queries 媒体查询

响应式网站是一个设计理念，它是多项技术的综合体。

在使用弹性盒子 flex 布局时，会有他的局限性，虽然会弹性伸缩，但是样式不能保证。

响应式网站的有点

减少工作量
1. 网站、设计、代码、内容都只需要一份
2. 多出来的工作量只是 JS 脚本、CSS 样式做一些改动
节省时间
1. 迅速发布、快速迭代、敢于试错、小步快跑
跨终端
每个设备都你能得到正确的设计，面向未来 -搜索优化
不需要为不同的终端申请不同的域名，共用一个网址

响应式网站的缺点

会加载更多的样式和脚本资源
设计比较难精准定位和控制
老版本浏览兼容不好

查看浏览器时长份额

caniuse
这个统计的全世界的
https://gs.statcounter.com/
这个可以选择区域

css3 媒体属性简介

width:视口宽度
height:视口高度
device-width:渲染表面的宽度，就是设备屏幕的宽度
device-height:渲染表面的高度，就是设备屏幕的高度
orientation:检查设备是处于横向还是纵向
aspect-radio:基于视口宽度和高度的宽高比
比如 width/height 16/9 或者 4/3
color:每种颜色的位数 bits，如 min-color:16 位、8 位
resolution:检测屏幕或打印机的分辨率
如：min-resolution:300dpi

以上属性都可以添加min-和max-前缀

视口宽度和设备宽度的区别

在传统 PC 上，桌面浏览器的视口(viewport)就是浏览器主窗口的区域。但在手机端，浏览器的有三个视口的概念

布局视口(layout viewport)
可视视口(visual viewport)
理想视口(ideal viewport)

为什么会有三个视口呢？

因为浏览器原先是为 PC 设计的，最小宽度也是 960 像素，当移动端出来后，当时 iPhone 的屏幕宽度才 320px，移动端显示这些页面，很不友好，体验较差；这时乔帮主就引入一个布局视口的概念，这个视口先不在手机上显示，用一个虚拟的布局视口把网页显示出来，一般把这个布局视口宽度设置成 960px；然后通过缩放布局视口，比如 0.3 倍，就可以在可视视口查看网页内容。可以放大、滑动来查看网页的不同部分内容。放大和滑动的都是布局视口。

黑色阴影部分就是布局视口，它的宽度一直是 960px，
看到内容的地方就是可视视口

理想视口就是布局视口在一个设备上的最佳尺寸。理想视口下的页面便于浏览器浏览、阅读。不需要缩放就可以很方便浏览页面。

###设置理想视口

1	<meda name="viewport" content="width=device-width" />

布局视口的宽度和设备可视视口的宽度一致。这样在设计时，就根据设备的宽度进行设计即可。不要再进行缩放来显示内容。
很多网站直接禁止了缩放，比如百度

1	<meda name="viewport" content="width=device-width,minimux-scale=1.0,maximum-scale=1.0,user-scalable=no" />

响应式网站设计实践原则

progressive enhancement 渐进增强
先构建一个简单的基本效果，然后根据不同的浏览器和分辨率的特点，逐渐增加新功能，比如增加个圆角、阴影、动画等等。
graceful degradation 优雅降级
这个正好相反，我们先构建一个最优雅最漂亮的效果，然后根据不同浏览器不支持的效果，去掉响应的效果。

建议采用优雅降级方案。
先根据小屏进行设计还是大屏进行设计？
这个根据实际情况来确定。
确定要支持的浏览器范围。

如何组织项目目录结构

约定优于配置
约定代码结构或命名规范来减少配置数量