文章目录
前言
不同的设备对应不同尺寸的屏幕,如果需要将网页根据用户所持设备进行对应的自适应响应,这时候我们就需要考虑屏幕自适应的设置。
一、主流的框架是如何定义屏幕尺寸范围的(媒体查询)
所有数据来自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*/
}
总结
屏幕自适应可以提高用户体验,也可提升用户的内容观感。一定程度上可以让不同设备的用户得到想要的页面显示结果。