移动端自适应-单位

2020.7.15 星期三 19：34

在pc端或者要求不是特别高的情况，可以是百分比，rem/em。或者配合媒体查询。
极少用到js。在移动端可能配合js动态修改字体大小的情况比较多。
新的单位vw，vh等在移动端布局也可以尝试，是不错的选择。

移动端单位自适应

媒体查询

响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，
但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。

平滑过渡方案。
$_PS: 感觉有点华而不实

div{
    font-size: 40px;
    -webkit-transition:font-size 0.2s ease-out;
}

@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}
@media only screen and (max-width: 900px) { div{ font-size: 36px; }}
@media only screen and (max-width: 800px) { div{ font-size: 35px; }}
@media only screen and (max-width: 700px) { div{ font-size: 34px; }}
@media only screen and (max-width: 600px) { div{ font-size: 33px; }}
@media only screen and (max-width: 500px) { div{ font-size: 32px; }}
@media only screen and (max-width: 400px) { div{ font-size: 31px; }}
@media only screen and (max-width: 300px) { div{ font-size: 30px; }}

rem

即使是通过 rem 单位来实现适配，也是需要内嵌一段脚本去动态计算根元素大小。

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)
页面基准320px(20px),html font-size值的计算：

1
2
3

var ele=document.getElementsByTagName("html")[0],  
     size=document.body.clientWidth/320*20;  // $_PS: 这里系数乘以10，以10做基底/数也是可以的
ele.style.fontSize=size+"px"

注：需设置meta缩放比1:1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw,vh

利用视口单位
实际可利用less或scss写函数/计算编译，或者postcss 自动转化。
$_PS: css 有表达式，不知道是否可以利用。

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport-opt': {
      viewportWidth: 375,
      viewportHeight: 667,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false,
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    }
  }
}

//以iphone7尺寸@2x 750像素宽的视觉稿为例
@function vw($px) {
    @return ($px / 750) * 100vw;
}

//假设一个div元素在视觉稿中，宽度为120px，字体大小为12px
div {
    width: vw(120);
    font-size: vw(12);
}