网页自适应布局

---

前言

不同的设备对应不同尺寸的屏幕，如果需要将网页根据用户所持设备进行对应的自适应响应，这时候我们就需要考虑屏幕自适应的设置。

---

一、主流的框架是如何定义屏幕尺寸范围的（媒体查询）

所有数据来自Bootstrap的官网需要请自行查看。bootcss

设备	大小
手机	小于768px
小屏幕（平板）	大于等于768px
中等屏幕	大于等于992px
大屏幕	大于1200px

二、几种常见的方法

1.Media Query

代码如下（示例）：

/*如果文档宽度小于 300 像素则修改背景颜色(background-color)*/
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

2.meta Viewport

将网页的宽度设定为手机屏幕的宽度

代码如下（示例）：

<meta name="viewport" content="width=device-width,initial-scale=1">

3.Resolution

解像度，假设你正在使用的不是高清的电脑屏幕，而屏幕的解像度设定为1920x1080。

4.imagesize

苹果4开启了手机的触屏时代，苹果手机的分辨率较高，所看到的图片也更加清晰，例如：这时我们有一张300像素乘以300像素的图片，iPhone4可以清晰显示，而iPhone6将ppi在此基础上提高了2倍，需要600像素乘以600像素的图片才得以清晰显示，类推iPhoneX等将ppi提高了3倍，这时候就需要900像素乘以900像素的图片才得以清晰显示。

<picture>
	<source srcset="https://placehold.it/600x600 2x, https://placehold.it/900x900 3x">
    <img src="https://placehold.it/300x300">
</picture>

5.font-size

相对尺寸单位，如有需要查看px、em、rem可以查看某鸟教程，px、em、rem的区别

html {
    font-size: 15px;
}

/*2rem 等于30px, 3rem 等于 45px*/
h2 {
    font-size: 2rem;
}

p {
    font-size: 1rem;
}

vh 与 vm是代表屏幕的比例配合scal()进行计算效果更佳

div {
	width: 100%;
	height: 100vh; /*定义一个占满整个屏幕的div*/
}

---

总结

屏幕自适应可以提高用户体验，也可提升用户的内容观感。一定程度上可以让不同设备的用户得到想要的页面显示结果。