Day21

2023.2.15

布局视口

width：虚拟窗口的屏幕宽度 device-width设备宽

initial-scale：页面的初始缩放比

user-scalabl：是否允许用户手动缩放

user-scalabl=no；不允许用户手动缩放

user-scalabl=yes；允许用户手动缩放，默认值

maxmun-scale：最大缩放比

minmun-scale：最小缩放比

Height：设置viewport（电脑屏幕的视口）的高度（一般情况用不到）

流式布局

流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定，因此在大屏幕手机下显示的效果会变成页面元素的宽度被拉长，高度和原来保持一致

优点：可以很好的解决自适应的问题

缺点：1、实际显示的效果不友好，屏幕越大，宽度被拉的很长，容易变形

2、大量使用百分比布局，会出现兼容性问题

rem单位

rem---css3中的一个单位，相对单位，根据【根元素】的字号大小进行计算的单位

rem布局

1. 设置页面的viewport
2. 动态计算并且设置不同尺寸的html的font-size属性

<script>

1. 获取当前屏幕的宽度

Var devicewidth=document.documentElement.clientWidth;

Psd设计稿的宽度为750px

Var desw=750；

手机屏幕 大于 设计稿件，就按照1：1的大小去制作

If（devicewidth>desw）{

Devicewidth=desw;}

1. 获取当前屏幕下html元素的字体大小

获取当前屏幕宽度字体的基础值

Var currFontSize=（devicewidth*100）/desw；

1. 赋值

</script>

vw布局

改变font-size的属值不需要js文件

vw viewport width 视口单位，将视口宽度平均分为100份

vw viewport height 视口单位，将视口高度平均分为100份

750px=100vw

1vw=7.5px