移动端页面布局

　　一、移动适配

　　　　移动端调试：

 

　　二、视口　(viewport)　　

　　　　2.1 布局视口　　layout viewport 　　早期使用，一般设置为980px

　　　　2.2视觉视口　　visual viewport　　用户正在看到的网站的区域

　　　　2.3理想视口　　ideal viewport　　需要手动添加meta视口标签，为了使布局视口和理想视口的宽度一致　　为了使网站在移动端有最理想的浏览和阅读宽度而设定

　　　　2.4 meta视口标签和标准视口设置

　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　

 　　　　三、背景缩放（background-size）

　　　　background-size：背景图片宽度，背景图片高度　　

　　　　　　　　　　

 

　　　　四、移动端页面

　　　　分为两种：单独制作移动端页面 和 响应式页面

　　　　五、移动端技术解决方案

　　　　5.1 CSS初始化（normalize.css）

　　　　　　移动端CSS初始化推荐使用 normalize.css/ 官网地址：normalize.css (csstools.github.io)

 　　　　5.2 CSS3 盒子模型（box-sizing） 

　　　　　　box-sizing: border-box　　特点：padding和border不会撑大盒子 移动端可以全部CSS3盒子模型，pc端考虑兼容性

　　　　5.3 特殊样式

　　　　　　-webkit-tap-highlight-color: transparent;　　点击高亮清除，设置为transparent（透明）

　　　　　　-webkit-appearance: none;　　　　在移动端浏览器默认的外观在ios加上这个属性才能自定义按钮和输入框的样式

　　　　　　-webkit-touch-callout: none;　　禁用长按页面时的弹出菜单

　　　　五、二倍精灵图做法

　　　　　　　　

 

　　　　六、图片格式

　　　　　　　　　　

 

 

 　　　　

　　　　　　

 

标签：box,布局,视口,webkit,移动,viewport,页面
来源： https://www.cnblogs.com/Pray386/p/16514195.html