响应式布局
/*@media: 声明关键字
screen:设备的类型
and : 关键字 (连接,指定)
() : 媒体特性(就是屏幕尺寸)
{} : 指定的样式
当 screen的屏幕尺寸 符合 指定的尺寸时, 执行指定的样式
max-width: 屏幕小于等于指定尺寸时 触发 (最多)
min-width: 屏幕大于等于指定尺寸时 触发 (最少)
*/
移动端开发的两种主流方案之一:
响应式布局兼容
1. 内容没有受到明显影响时,自适应宽高即可
2. 内容受到明显的影响时,改变布局,来保证内容的清晰
响应式布局:用于解决不同浏览器,不同分辨率以及不同设备的不同显示效果
优点:
1.面对不同分辨率的设备灵活性很强
2.能够快捷的解决多设备显示适应的问题
缺点:
1.兼容各种设备工作量大,效率低,页面加载时间长
2.一定程度上,会改变网站原有的布局结构,可能会出现用户混淆问题
主流方案之二: 单独制作移动端的页面
### 设置 Viewport
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。
两个像素和一个像素比:
1)css像素(独立像素,逻辑像素) : 在CSS、JS中使用的一个长度单位。单位px
注:在pc端1物理像素等于1px,但是移动端1物理像素不一定等于1px
2)物理像素:屏幕的物理像素,又被称为设备像素,他是显示设备中一个最微小的物理部件。
任何设备屏幕的物理像素出厂时就确定了,且固定不变的
设备像素比: 简称为dpr, 它是物理像素和独立像素的对应关系(也就是比例)
备注:判断是否为高清时, 看一下dpr的值是否大于1。 一般情况下dpr为整数,
但是一些安卓的机型不为整数(奇葩)
通过:window.devicePixelRatio获得