[前端笔记011]CSS布局之移动端vw适配与媒体查询--vw,@media

最新推荐文章于 2023-06-27 11:38:28 发布

Plusmile1

最新推荐文章于 2023-06-27 11:38:28 发布

阅读量380

点赞数

分类专栏：前端文章标签： css 前端 html css3

本文链接：https://blog.csdn.net/qq_29589765/article/details/127974933

版权

39 篇文章 0 订阅

订阅专栏

CSS像素时逻辑像素，默认情况下和物理像素1：1
查看手机像素尺寸的网站：material.io/resource/devices
手机像素大小远小于计算机像素
默认情况下，移动端的网页会将视口设置为980像素(CSS像素),以确保PC端网页可以在移动端正常访问,超过980会自动缩放，以完整显示,但这样的体验效果并不好,所以大部分网站会专门为移动端设计网页
视口缩放时(浏览器缩放或windows缩放) ，比例也会改变
可以通过meta标签的viewport和content属性来设置视口大小
每一款移动设备设计时，会有一个最佳像素比，一般只需将像素比设置为该值即可得到最佳效果,将像素比设置为最佳像素比的视口大小称为完美视口
在content中设置width=device-width即可达到完美视口,再加一个缩放比例initial-scale=1.0，加个保险
因为完美视口大小不一，所以不再使用px进行布局,而使用VW
vw表示视口的宽度，100vw就是一个视口的宽度,视口的百分比
设计图一般 750px或1125px，使用vw时需要转换，这里就需要vw适配
html中设置font-size=xxvw,样式中使用rem直接换算，但字体最小12px，所以可以将html的font-size设置为：(100vw/750px)*40，然后在需要设置长度的地方使用rem，比如less中：height: (175/40rem);

响应式布局中网页可以根据不同的设备或窗口大小呈现不同的效果，关键是媒体查询
媒体查询语法 @media 查询规则{}
媒体类型:
1. all,所有设备
2. print, 打印设备
3. screen,带屏幕设备
4. speech,屏幕阅读器
5. 可以用,连接多个媒体类型
6. 可以在媒体类型前加一个only,表示只有,主要是为了兼容老版本浏览器
媒体特性：
1. width 视口宽度
2. height 视口高度
3. 上面只有特定的点生效，一般不用，使用下面的
4. min-width 视口的最小宽度(视口大于指定宽度时生效)
5. max-width 视口的最大宽度(视口小于指定宽度时生效)
发生变化的点为断点，一般常用断点(bootstrap)：
1. <768 max-width:768
2. 768~992 min-width:768
3. 992~1200 min-width:992
4. 1200 min-width:1200
使用连接符可以表示范围，使用 and或，或 not 连接
例：在700px和500px之间的背景色为#bfa

@media only screen and (min-width:500px) and (max-width:700px){
	body{
		background-color: #bfa;
	}
}

关注

专栏目录