移动端适配

发表于

移动端是做适配

  • 1.meta viewport
  • 2.媒体查询
  • 3.动态 rem 方案
    1.在html中的head加入下面这个代码
    1
    2
    3
    4
    5
    6
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0，user-scalable=no">
    //width=device-width: 让当前viewport宽度等于设备宽度
    //user-scalable=no: 禁止用户缩放
    //initial-scale=1.0: 设置页面的初始缩放值为不缩放
    //maximum-scale: 允许用户的最大缩放值为1.0
    //minimun-scale: 允许用户的最小缩放值为1.0
2.不同的设备采取不同的样式，实现该方法应用媒体查询

使用 media 查询来响应不同分辨率
如在引入外部样式时，只有满足条件最大宽度为425px时，example.css才生效：

1
<link rel="stylesheet" media="(max-width: 425px)" href="example.css" />

在CSS内部，也可以用media来设置特定的情况下让某些样式生效，如下，即当最大宽度为425px时，该样式生效：

1
2
3
4
5
<style>
  @media (max-width: 425px) {
     ……
  }
</style>

使用动态 REM 方案保证手机端的显示效果
rem指的是根元素的字体大小，根元素一般指的是html

3.动态rem即在js中设置
1
2
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')

这样可以保证整体页面的比例，不会导致页面变形

(2) 使用scss直接将px转换成rem,减少自己计算时间
例子：

1
2
3
4
5
6
@function px2rem($px){
    @return $px/$designWidth*5 + rem;
}

$designWidth: 750;
1rem = px2rem(150) =150px;