- 约束视口
- width=device-width 视口为设备宽度（就是人设置的一个宽度）//不设置的话默认为980px
- initial-scale=1.0 初始化的视口大小是1.0倍
- maximum-scale=1.0 最大的倍数是1.0倍
- user-scalable=0 不允许缩放视口
- 手势兼容性的问题
- 只需要检测touch相关事件来阻止事件的触发即可
- 只需要检测touch相关事件来阻止事件的触发即可
- 布局视口
- 图片
- max-width:100%：要保证所有图片最大显示为其自身的100%
- width:100%：它显示得跟它的容器一样宽
- max-width:100%：要保证所有图片最大显示为其自身的100%
- 百分比布局
- width、height、padding、margin
- 父元素的width、height、padding、margin 百分比
- width、height、padding、margin
- 弹性布局
- flex
- bfc？
- 媒体查询
- /
- 查询现在看这个网页的设备是什么，以及它的宽度是多少。screen表示看这个网页的设备是显示器
- /
- rem响应式布局
- rem:当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的
- em:表示父元素的字号的倍数。(特例：在text-indent属性中，表示文字宽度)
- += 媒体查询
- @media screen and (min-width: 320px) { html {font-size: 14px;} } @media screen and (min-width: 360px) { html {font-size: 16px;} } @media screen and (min-width: 400px) { html {font-size: 18px;} }
- 响应式与自适应的选择
- 响应式针对的是不同分辨率设备而进行的适配式设计，以利用@media规则为主要手段，而自适应则忽略@media以比例布局为主，目的是适应不同的浏览器窗口大小。
- 给HTML设定一个font-size的值
- 为什么字体不使用rem而是采用px呢？
- rem单位换算之后出现各种奇奇怪怪的数值，最为明显的就是更多的小数位
- 在浏览器中，各浏览器中对小数点的计算存在偏差，
- 有些带小数的font-size值在特定的浏览器显示并不够清晰。
- 希望在小屏幕下面显示跟大屏幕同等量的字体
- 用rem的话：在小屏幕下就会存在小屏幕字体更小的情况
- rem单位换算之后出现各种奇奇怪怪的数值，最为明显的就是更多的小数位
- Retina屏幕下的处理与安卓手机的适配
- 默认所有的安卓设备都强制性设置dpr为1：为什么安卓不用retina屏幕，安卓下面是不是就不会有模糊的问题？
- 模糊的本质是因为dpr，安卓手机下也存在模糊的情况。只不过它的屏幕不叫retina屏幕，没有这个叫法
- 前端工程师的价值体现
- 前端国际化
- 默认所有的安卓设备都强制性设置dpr为1：为什么安卓不用retina屏幕，安卓下面是不是就不会有模糊的问题？
