前端学习（八）移动布局的基本概念

移动布局基本概念

视口 viewport

• 概念：视口就是浏览器显示页面内容的屏幕区域
• 分类

类型	说明
布局视口 layout viewport	解决早期的PC端页面在手机上显示的问题，一般为980px
视觉视口 visual viewport	是用户正在看到的网站的区域
理想视口 ideal viewport	最理想的视口尺寸，通常等于设备宽度

• 视口标签

"viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

属性	说明
width	设置视口的宽度，可以设置device-width的特殊值
initial-scale	初始缩放比，一般为1
maximum-scale	最大缩放比，一般为1
minimum-scale	最小缩放比，一般为1
user-scalable	是否允许用户缩放，一般为no或0，也可以是yes

二倍图

• 物理像素：是屏幕上真实存在的像素
• 物理像素比：一个px能显示的物理像素点的个数，称为物理像素比
• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

当手机的物理像素比不为1时，就要使用倍图，例如二倍图中：

• img插入图片：使用width和height属性指定图片缩放后的尺寸

• bg背景图片：使用background-size属性指定缩放后的尺寸

可选的参数：百分比、长度px、cover、contain

cover：扩展图片，完全覆盖

contain：扩展图片，让宽度或高度适应内容区域，不一定填满

移动开发的方案选择

• 单独制作移动端页面：主流选择
• 响应式页面兼容移动端：兼容性难调，三星官网
• 公共样式选择：normalize.css
• 移动端盒子模型：box-sizing，盒子的宽度等于本身+padding+boder
• 移动端特殊样式

 /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }