8月24日、8月26日（浏览器私有前缀、移动端：视口、二倍图、特殊样式、流式布局、京东首页案例）

目录

一、浏览器私有前缀

二、CSS3总结

三、移动web开发

3.1 移动端基础

（1）浏览器现状

（2）手机屏幕现状

（3）常见移动端屏幕尺寸

（4）移动端调试​编辑

3.2 视口——屏幕区域

（1）布局视口 layout viewport

（2）视觉视口 visual viewport

（3）理想视口 ideal viewport​编辑

3.3 二倍图

（1）物理像素/物理像素比

 （2）多倍图

        1)图片缩放

        2)背景缩放

        3)cutterman工具

3.4 移动端开发选择

（1）移动端主流方案

（2）单独移动端页面（主流）

（3）响应式兼容PC移动端

3.5 移动端技术解决方案

 （1）移动端浏览器

 （2）CSS初始化 normalize.css

 （3）CSS3盒子模型 box-sizing

 （4）特殊样式

3.6 移动端常见布局

（1）流式布局基础（百分比布局）

（2）流式布局——京东首页案例（移动端）

        1) body

        2）结构布局

                app模块(最顶端)

                搜索栏模块

                主体内容部分

        3）完整代码

        4）整体效果

---

一、浏览器私有前缀

二、CSS3总结

三、移动web开发

3.1 移动端基础

（1）浏览器现状

（2）手机屏幕现状

（3）常见移动端屏幕尺寸

（4）移动端调试

 和网页端基本一致 

3.2 视口——屏幕区域

        视口（viewport）就是浏览器显示页面内容的屏幕区域。

        视口可以分为布局视口、视觉视口和理想视口。 

（1）布局视口 layout viewport

（2）视觉视口 visual viewport

（3）理想视口 ideal viewport

        1) meta视口标签

3.3 二倍图

（1）物理像素/物理像素比

 物理像素=分辨率=横着/竖着..个像素点（手机端px和物理像素不一样）

物理像素=分辨率，iPhone8的物理像素是750，物理像素比为2，也就是说 ：在iPhone8里面 1px开发像素 =  2 个物理像素；所以iPhone8的开发像素（宽度）最高为375；

 视网膜屏技术：

 （2）多倍图

1)图片缩放

        问题：一个50*50（css像素）的图片，直接放到iPhone8里面会放大两倍（变为100*100）从而图片变得很模糊 

        解决：直接放一个100*100的图片，然后手动把图片缩小为50*50 （css像素）

        注： 准备的图片 比实际的要大两倍，这就是2倍图

2)背景缩放

       只写一个参数，代表的是宽度，高度省略了，会等比例缩放。（单位可以是百分比，大小是相当于父盒子来说的） 

        cover是扩展背景图的宽度和高度以至于完全覆盖住整个盒子 。（等比例拉伸，背景图可能显示不全，但要是和盒子的比例一样，背景图片就能完全覆盖盒子并显示全）

        contain是扩展背景图的：宽度或高度（宽度/高度到了就不再拉伸高度），高度和宽度是等比例拉伸。（可能有空白区域）

代码：

效果：

3）cutterman工具

        可以切出1倍、2倍、3倍的图。

3.4 移动端开发选择

（1）移动端主流方案

（2）单独移动端页面（主流）

（3）响应式兼容PC移动端

3.5 移动端技术解决方案

 （1）移动端浏览器

（2）CSS初始化 normalize.css

移动端的CSS初始化推荐使用 normalize.css，因为它：

         

官网地址： http://necolas.github.io/normalize.css/

 ࿰