解决网页在移动端的适配问题,一般的思路是通过查询设备的屏幕大小,自动对元素进行等比缩放,如果是PC端的适配问题就是通过浏览器可视区域的大小进行缩放,一般是有固定的网页中心区域
重点:了解PC端和移动端的视口宽度,以及vw相对单位的自适应原则-等比缩放嵌套的所有元素
效果图.gif
效果图.gif
效果图.gif
一.适配问题的发展
- 通过媒体查询适配
- 通过rem/em适配
- 通过视口适配
- 通过js适配
目前的主流适配方法是视口适配,js适配方法已经被视口取代,媒体查询是最早的适配方法,使用比较复杂
二.关于视口
- 什么是视口
视口是用于设置浏览器根元素(html)大小的
默认情况下,不同的浏览器会设置不同的视口大小,由浏览器的内核决定 - 默认情况下,PC端视口的大小就是浏览器可视区域的大小
-
默认情况下,移动端可视区域的大小并不是浏览器可视区域大小,不同浏览器内核会给视口设置不同的默认大小,一般有两种:980px/1024px,对于iphone和ipad默认的视口大小都是980px,为了保证能够完整的显示网页的内容,移动端的浏览器会自动缩放网页
image.png -
如何保证在移动端正常显示网页布局呢?
由于自动缩放,布局显示混乱,解决方法是让移动端的视口和设备的大小一致,这样就不会由于默认视口过大,造成根据屏幕宽度的自动缩放
image.png
通过meta标签调整视口的做法只适用于移动端,对于PC端还是默认的视口大小也就是浏览器的可视范围
- vw和vh也是相对单位,em相对于父元素,rem相对于根元素,vw和vh相对于视口.如:
视口宽度为1000,高度为1000,1vw=1000/100=10px,1vh=1000/100=10px - 既然vw和vh也是相对单位,所以可以使用vw和vh做适配进行等比缩放
- 使用vw和vh不同通过媒体查询自己计算不同屏幕的大小,系统会自行计算
三.关于媒体查询
- rem和em一个是相对于根元素(body)字体的大小,一个是相对父元素字体的大小
- 使用方法:将750px的设计图片等分为n份,每份的大小m利用媒体查询,利用结果根据份数n动态计算不同屏幕的m大小.也就是说利用rem/em做适配需要自己计算一个相对值再进行等比缩放
- 实现方法:根据查询结果设置最小宽度的相对大小
苏宁易购
@media screen and (min-width:750px){
html{
font-size:7.5px;
}
}
@media screen and (min-width:375px){
html{
font-size:3.75px;
}
}
image.png
image.png
