[移动端] “viewport“ content=“width=device-width, initial-scale=1.0“ 什么意思

布局视口, 代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body,html {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box"></div>
</body></html>

怎么换成移动端就这么小了呢?

因为默认视口是980px,这个盒子相对980等比缩小就变成这样了

那怎么办?加参数!!

假如我的视口是400px

<meta name="viewport" content="width=400px ">

就会得到以下情况

没错,占了一半!!

但是总不能写死这个宽度,为了让页面显示完整,可以让视口宽度等于设备宽度

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

width=device-width 表示网页的宽度应该等于设备的宽度，这样可以确保网页在不同设备上以正确的比例显示，不会出现水平滚动条。
initial-scale=1.0 表示网页的初始缩放比例为1.0，也就是默认大小，不进行缩放。

如果你不想别人放大,你可以设置

<meta name="viewport" content="width=200px, initial-scale=1.0,user-scalable=no">

确保万一 ,最小最大值都设置1

<meta name="viewport" content="width=200px, initial-scale=1.0,

user-scalable=no, maxmun-scale=1.0,minmun-scale=1.0">

可参考京东

如何自适应

上面只是等比例放小而已,有没有根据不同屏幕大小来放大缩小

方案一:百分比适配

因为不同属性的百分比值相对的可能是不同参照物, 所以百分比在移动端适配中使用是非常少的;

方案二:rem+动态的font-size值

只要考虑2件事情

问题一: 针对不同的屏幕，设置html不同的font-size
问题二: 将原来要设置的尺寸，转化成rem单位

媒体查询

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=00px, initial-scale=1.0,user-scalable=no, maxmun-scale=1.0,minmun-scale=1.0"><title>Document</title><style>@media screen and (max-width:320px) {html {font-size: 7px;}}@media screen and (min-width:375px) {html {font-size: 16px;}}@media screen and (min-width:426px) {html {font-size: 20px;}}body,html {margin: 0;padding: 0;}.box {width: 15rem;height: 15rem;background-color: pink;}</style>
</head><body><div class="box"></div>
</body></html>

缺点如下

1.我们需要针对不同的屏幕编写大量的媒体查询

2,如果动态改变尺寸，不会实时的进行更新,而是大于某个范围才更新

方案二

    //获取html元素let html = document.documentElement;function setREM() {//重新计算html-px值const htmlFontSize = html.clientWidth / 10;//重新赋值htmlpx值html.style.fontSize = htmlFontSize + 'px'}//上来就初始化启动一次setREM()//监听大小重新启动window.addEventListener('resize', setREM)