前端学习八移动布局的基本概念
目录
前端学习（八）移动布局的基本概念
移动布局基本概念
视口 viewport
- 概念：视口就是浏览器显示页面内容的屏幕区域
- 分类
| 类型 | 说明 |
|---|---|
| 布局视口 layout viewport | 解决早期的PC端页面在手机上显示的问题，一般为980px |
| 视觉视口 visual viewport | 是用户正在看到的网站的区域 |
| 理想视口 ideal viewport | 最理想的视口尺寸，通常等于设备宽度 |
- 视口标签
<meta name="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; }