本文主要是介绍0_9 移动端、媒体查询、响应式布局,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、像素和视口
1.1 像素:
物理像素:分辨率数
css像素:编写网页时,所用都是css像素
浏览器在显示网页时,需要将CSS像素转换为物理像素然后再呈现 , 一个css像素最终由几个 物理像素显示,由浏览器决定: 默认情况下
在pc端,一个css像素 = 一个物理像素
1.2 视口
屏幕中用来显示网页的区域
我们可以通过改变视口的大小,来改变CSS像素和物理像素的比值
默认情况下:
视口宽度 1920px(CSS像素)
1920px(物理像素)
- 此时,css像素和物理像素的比是 1:1
放大两倍的情况:
视口宽度 960px(CSS像素)
1920px(物理像素)
- 此时,css像素和物理像素的比是1:2
2、移动端页面
每一款移动设备设计时,都会有一个最佳的像素比,一般我们只需要将像素比设置为该值即可得到一个最佳效果,将像素比设置为最佳像素比的视口大小我们称其为
完美视口
将网页的视口设置为完美视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.1移动端开发注意事项
在移动端开发时,就不能再使用px来进行布局了
vw 表示的是视口的宽度(viewport width)
- 100vw = 一个视口的宽度
- 1vw = 1%视口宽度
vw这个单位永远相当于视口宽度进行计算
设计图的宽度 750px 1125px
设计图 750px
使用vw作为单位 100vw
创建一个 48px x 35px 大小的元素
100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px
6.4vw = 48px(设计图像素)
4.667vw = 35px
vm适配的问题10_flex\09.vw适配.html
3、响应式布局
网页可以根据不同的设备或者窗口大小,呈现不同的效果,可以使一个网页适用于所有设备
关键:媒体查询 通过媒体查询,可以为不通的设备,或设备不同状态来分别设置样式
4、媒体查询
语法: @media 查询规则{ }
媒体类型:
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
- 可以使用,连接多个媒体类型,这样它们之间就是一个或的关系
可以在媒体类型前添加一个
only,表示只有。 only的使用主要是为了兼容一些老版本浏览器
媒体特性:
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度(视口大于指定宽度时生效)
max-width 视口的最大宽度(视口小于指定宽度时生效)
如:
1 @media only screen and (min-width: 500px) and (max-width:700px){
2 body{
3 background-color: #bfa;
4 }
5 }
这篇关于0_9 移动端、媒体查询、响应式布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!