移动端布局

概念

• 传统的布局：PC 一套 css ，移动端一套 css，根据设备来重定向到不同的 ip，以显示不同的 css
• 响应式布局：同一 ip 在不同屏幕尺寸下有不同的布局

媒体查询

• 适用于响应式布局

• 针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

@media screen {}

• 一般用 max-width 和 min-width 来针对不同的设备

@media screen (min-width: 750px) and (max-width: 1200px) {}

• 逻辑关系
  1. and ：与
  2. ,：或
  3. not：非（非作用与逗号前的所有and）

百分比布局

• 通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果

值	基准
width	父元素的width
height	父元素的height
top / bottom	第一个非 static 定位的父元素的height
left / right	第一个非 static 定位的父元素的width
padding / margin	父元素的width
border-radius	自身的width
translate	自身的width

rem 布局

em 是基于自己的 font-size 来决定大小的

• rem 是基于根元素html的 font-size来决定大小的
• 通过 js 调节根元素的 font-size 来适应不同宽度的屏幕

假设设计稿宽度为 750px，设计稿上有一个方块宽为 30px，则自己设定一个换算基准值（即根元素的 font-size），设为20px，则方块宽可写为1.5rem

假设用户手机宽度为 375px，则显示那个方块的宽应该为 15px，在css 的 rem ，修改基准值为 10px 即可以达成自适应效果

function setRemInit() {
    const viewWidth = document.documentElement.clientWidth || window.innerWidth
    // viewWidth / 设计稿宽 * 设计稿换算基准值 + 'px'
    document.documentElement.style.fontSize = viewWidth / 750 * 20 + 'px'
}
// 初始时调动一次
setRemInit()
window.addEventListener('resize', setRemInit)

视口布局

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值