Xiao〰xiao ? !

移动端布局

Xiao〰xiao ? !html

百分比布局

  • 流式布局，就是百分比布局，也称非固定像素布局。
  • 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，
  • 内容向两侧填充。
  • 流式布局方式是移动web开发使用的比较常见的布局方式。
注意事项

  • 制作过程中，需要定义页面的最大和最小支持宽度。

  • max-width最大宽度(max-height 最大高度)

  • min-width最小宽度(min-height最小高度)

    原因:高度和文字大小都是通过px固定取值，所以如果当显示屏幕过大或过小可能会导致某些页面元素被拉的很长很扁，不能正常显示

rem布局

  • 市场比较常见：
  • 使用媒体查询 media (需要一个一个适配)
  • 引入 flexible.js (推荐使用)

使用rem布局方案，实现视口宽度不同，网页元素宽高等比缩放效果，实现在不同宽度的设备中，网页元素尺寸等比缩放效果

rem介绍

rem 相对单位，相当于HTML标签字号计算尺寸 1rem = 1HTML标签字号

原理

需求：视口越大，元素就越大

但是无法直接在 视口增大 时 让元素也增大 ，而 rem 可以做到：html字号增大时，让其的元素也增大 ，所以 我们可以 在视口变大时让html的字号变大，html字号变大了元素也就会变大

功能实现

1.可以通过媒体查询的方式 让屏幕视口大小变化时 让其的 html字号也变大

但自己写起来比较麻烦 所以可以 引入 flexible.js 文件：让其自动适配

2.因为只有设置了 rem为单位的属性，才可以使用该方案，所以我们需要将 px 转换为 rem

rem值 =当前元素 px值 / 跟字号

跟字号 ： 设计图宽度 / 比例关系（大部分都是2倍图） / 10

可以通过less进行运算,存进变量中，通less语法进行使用
一般的移动端图片 宽度为750px的 二倍图 通过运算 得到 跟字号 750/2/10
@rootrem:37.5rem
然后用当前元素的宽高 除 根字号得到当前 rem值
width(150/@rootrem)

vw/vh布局

  • vw/vh 是一个相对单位（类似 em 和 rem 相对单位）
  • vw 是：viewport width 视口宽度单位 （通过将当前元素转为 vw，来进行适配）
  • vh 是：viewport height 视口高度单位
  • 相对视口的尺寸计算结果
  • 1vw = 1/100 视口宽度 vw：把视口宽度分成100份
  • 1vh = 1/100 视口高度 vh：将视口高度分成100份
使用方法
多数情况：设计图宽度750  1vw = 3.75px
通过less语法进行使用
@rootvw=3.75vw
height:(250/@rootvw)

插件

  • 如果不想自己计算，或者不想用less。
  • 可以通过在vscode安装 px to rem & rpx & vw 这个插件来计算,不过需要通过设计图大小来调整值,默认值为750
ON THIS PAGE