移动端适配方法:rem+vw

usrname为username

已于 2023-04-22 20:43:14 修改

阅读量596

点赞数

文章标签： css html css3

于 2023-04-22 20:42:53 首次发布

本文链接：https://blog.csdn.net/weixin_54327001/article/details/130308569

版权

1.百分比设置:几乎不用

因为各种属性百分比参照物(自身/父元素/...需要去查文档)很难统计固定,所以不用百分比进行适配

2.rem单位+动态html的font-size

使用rem,因为rem参考html的fz,只需要在不同的屏幕上设置不同的html的fz即可,其他地方全用rem

rem的fz尺寸

媒体查询

编写js代码

// 1.获取html的元素
const htmlEl = document.documentElement
 
function setRemUnit() {
  // 2.获取html的宽度(视口的宽度)
  const htmlWidth = htmlEl.clientWidth
  // 3.根据宽度计算一个html的font-size的大小
  const htmlFontSize = htmlWidth / 10
  // 4.将font-size设置到html上
  htmlEl.style.fontSize = htmlFontSize + "px"
}
// 保证第一次进来时, 可以设置一次font-size
setRemUnit()
 
// 当屏幕尺寸发生变化时, 实时来修改html的font-size
window.addEventListener("resize", setRemUnit)

lib-flexible库

在github下载

原理与js函数相似,但是库函数添加了查询浏览器是否支持0.5px,不支持可以使用scale缩小

以及前进后退页面的适配

很多页面的fz默认继承了html字体,如果750px的宽度,fz可能默认为75px,太大了,所以需要重新设置一个默认的fz大小

但是!!!!!!!

rem的单位换算

1.手动计算,帮助理解,实际不会用

2.less/scss函数

.pxToRem(@px) {
  result: 1rem * (@px / 37.5);
}
 
.box {
  width: .pxToRem(100)[result];
  height: .pxToRem(100)[result];
  background-color: orange;
}
 
p {
  font-size: .pxToRem(14)[result];
}