百分比布局
- 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口
- 布局视口（layout viewport）
一般设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示问题
布局视口就是在手机上可以看到PC端页面，只不过是页面缩小了而已，但是图片和字体大小，都是非常模糊的，用户根本看不清，除非用手指缩放网页。
- 视觉视口
视觉视口，字面意思，它是用户正在看到网站的区域，注意：是网址的区域
- 理想视口
理想视口，对设备来讲，是最理想的视口尺寸
meta视口标签的主要目的，布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽。
- 视口总结
- 视口就是浏览器显示内容的屏幕区域
- 视口分为布局视口，视觉视口，和理想视口
- 我们移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
- 想要理想视口，我们需要给我们的移动端页面添加meta 视口标签
- meta 视口标签
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport 的宽度，可以设置device-width 特殊值 |
| initial-scalable | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，小于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no |
标准的viewport 设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
- 物理像素和物理像素比
- 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商出厂时就设置好了，例如苹果6\7\8 是750*1334
- 我们开发的时候1px不是一定等于1个物理像素
- PC端页面，1个px等于1个物理像素，但是移动端就不尽相同
- 一个px的能显示物理像素点的个数，称为物理像素比或屏幕像素比
- 分辨率就是我们的物理像素比，分辨率越高，我们看到的事物就越清晰
- 物理像素，就是我们说的分辨率，iphone8的物理像素是750
- 在iphone8 里面， 1px开发像素 = 2物理像素
| 设备 | 尺寸（英寸） | 开发尺寸(px) | 物理像素比（dpr） |
|---|---|---|---|
| iphone3G | 3.5 | 320*480 | 1.0 |
| iphone4G | 3.5 | 320*480 | 2.0 |
| iphone5G | 4..0 | 320*568 | 2.0 |
| HTC One MS | 4.5 | 360*640 | 3.0 |
| iphone 6 | 4.7 | 375*667 | 2.0 |
| Iphone6 plus | 5.5 | 414* 736 | 3.0 |
- 二倍图 Retina(视网膜屏幕)是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
多倍图：
- 对于一张50px*50px 的图片，在retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
- 在标准的viewport 设备中，使用倍图来提高图片的质量，但是现在还存在3倍图、4倍图的情况，这个看实际开发公司的需求
- 背景图片，注意缩放问题
- 背景缩放 background-size
- background-size： cover; 表示的是背景完成铺满容器
效果图：
- background-size: contain; 长和宽有一遍铺满容器就可以了
效果图：
- 移动端技术解决方案
-
移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题
-
我们可以放心使用h5 标签和css3 样式
-
同时我们浏览器的私有前缀我们只需要考虑添加webkit即可
normalize.css
- 移动端特殊样式
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮我们需要清除样式 */
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a {
-webkit-touch-callout: none;
}
rem 单位
rem 是一个相对单位，rem的基准是相对于html元素的字体大小
html {
font-size: 12px;
}
div {
width: 2rem; /* 转换成px就是24 */
}
