标签：工程师 media 用户 浏览器 etc 单位 head log hone
媒体查询
1、媒体类型
@media screen and (max-width: 300px) { body { background-color:lightblue; } }
其中media后面的那个单词是媒体类型
all所有媒体类型（默认，可以不写），screen屏幕，这两个是最常用的。
2、逻辑操作符
媒体查询的意思就是后面这个逻辑表达式为真，里面的css起作用。
中间and是逻辑操作符
and 与 都为真才真
or或逗号 有一个真就为真
not 非 not的有效范围就到逗号 not (screen and man-width=800px),min-width=480px。逗号后面你也用not就必须再写not
only 仅仅 老旧浏览器不支持媒体查询时候使用，老旧浏览器不支持媒体查询，
media=screen老浏览器视为真，不管你后面写什么，都是真，然后你的样式就乱了。
media=only老浏览器视为false ，媒体查询的样式就不会混乱了基本样式了
3、css媒体属性
width 视口宽
height 视口高
device-width 设备宽
device-height 设备高
orientation 设备横屏竖屏
resolution 屏幕分辨率
aspect-ratio 宽高比
color 颜色位数
以上是最常用的几个，前面都可以加max-，min-。
4、viewport视口
布局视口layout、可视视口visual、理想视口ideal。
这是哪个视口咋来的呢？
pc端网站太大在手机上显示不全，浏览器的解决办法是先在一个虚拟的布局视口中显示完整的pc页面。然后进行缩放，让他在手机上能正好显示，此时缩放比为0.4。这时候你看见的窗口叫可视窗口，他展示了一个pc大小的页面，假定塔有960px，这时候可视窗口的大小是960px。假如我把缩放比调试成0.5，pc页面不能手机这么大的屏幕完全显示，塔指显示了一部分比如800px的页面，此时可视窗口大小是800px。可视窗口是会改变的。
即使你把pc页面整个放到手机上呈现出来，但是因为缩放的太小了，你还是要手动放大。要是布局视口和可视窗口一样大就不会缩放了，可视窗口等于设备宽度，三者统一的时候，就有了最加体验，不需要缩放就可以很好地查看页面，因此就有理想视口的概念。
<meta name="viewport" content="width=device-width, minimum-sale=1.0, maximum-sale=1.0, user-scalable=no"/>
在head加入这样一句话，视口宽度等于设备宽度，最大最小缩放比为1，用户不允许缩放。我们就可以在理想视口开发了。
也可以这样写，但是就是允许用户缩放了
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5、怎样分析设计图
作为前端工程师，当你得到设计图的时候应该做些什么？
与设计师沟通
①和设计师沟通网站如何交互？
②问设计师要设计规范[字体、颜色、字号、间距等]？
③什么地方必须百分之百还原？
分析设计图
①观察哪些地方随屏幕大小变化而变化，哪些不变
②分析整体结构，拆分成几块，哪些模块可以复用，比如top和footer，方便模板渲染
③分析布局，每一块区域如何排列，使用用什么标签，元素如何排版定位等等
④切图，用ps或者sketch。注意切图类型的选择，透明图用png，动态图用gif，颜色丰富的图用jpg。如果切完很大最好压缩一下。
6、响应式网站的设计原则
①确定的适配的浏览器，pc端一般chrome，firefox，ie9以上，safari。
phone ，安卓自带浏览器，苹果的safari，uc，欧朋，360等。
②优雅降级scraceful degradation 就是先用最新的技术，写出最漂亮的状态，而不是为了适配老ie而写很难看的页面。
③写页面是先写pc还是phone端？哪个用户多，从哪个先写。
④不同设备显示的内容是否相同，就是小设备是否还要显示那么多东西？由产品经理决定就好
⑤断点，小于等于480px,大于481px小于等于800px，大于801px小于等于1400px,1400+。写媒体查询不要根据设备类型来写
逻辑表达式要用em单位，要÷16。为啥呢? 这是一个坑
逻辑表达式里em相对rem相对安全,em是相对父元素，rem是相对html元素。
÷16是因为浏览器默认字体一般是16，媒体查询会根据默认字体来算。
7、如何组织目录结构
目录用小写、简写、单数命名
库可以放在vendor文件夹，加压缩的加.min
id用驼峰式命名，类名用-。
标签：工程师 media 用户 浏览器 etc 单位 head log hone
原文地址：http://www.cnblogs.com/wufangfang/p/6436121.html
