移动端页面的几个注意

Posted 2020-10-16

相信大家对移动端页面开发不会太陌生吧，但是它和PC页面之间究竟有什么差别呢？

1.响应式布局

所谓响应式布局，核心内容就是media了,它类似与if的写法

@media (条件){

　　/* css语句 */

}

举个栗子:

在屏幕分辨率为320px与980px之间的div会加上background:red的css样式

 

@media (max-width:980px and min-width:320px){
    div{
        background: red;
    }
}

 

ps:写法类似的如 @supports,CSS3的条件判断就只有2个：

其一是“@media”规则，主要用来“根据媒体属性区分样式表。
其二是“@supports”规则，在不支持CSS3的浏览器下实现渐进增强式设计。

/* 如果浏览器支持display:flex,section加上display:flex和background: red;样式 */
@supports (display:flex) {
  section { 
    display: flex;
    background: red;
  }
}    

/* 如果浏览器不支持display:flex,section加上float:left和background: green;样式 */
@supports not (display:flex) {
  section { 
    float: left;
    background: green;
  }
}    

 

2.media_viewport和rem

 

<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0" />

 

相信大家对以上代码并不陌生吧，这是移动端页面必须加的meta，这个对下面的html fontSize的计算有着影响，最常用的conten属性t就上面写这3个，记住这三个基本就行了。

如果不加上这段meta viewport clientWidth将会被解析成浏览器默认值，例如980px、1024px等，最终会影响到html的font-size计算~~

 

说到rem就不得不提及em，em是相对字体大小来定义，例如一个div的font-size：12px 那么它的2em就相当于24px了

而rem是相对于html标签的font-size，因此我们想要写出一些随着屏幕大小变化而变化的页面（兼容不同分辨率的页面），我们可以考虑用rem这个单位，我们也只需要在每次window.onload的时候计算一下

window.onload = function(){
    //designWidth/自己喜欢的字体大小 = 846px/100px = 8.46
    //我们采用基准fontSize是100是便于计算，设计稿上的px转化为rem只需要除以100
    document.documentElement.style.fontSize = document.documentElement.clientWidth/8.46 + ‘px‘;
}

所以一般我们用 实际设备宽度/（设计稿宽度/100） 来计算出html fontSize的大小，到时候所有的单位大小都安装设计稿的1/100倍来写就ok了，当然我们把100直接换成1也是ok的，这样会更方便，主要看个人习惯。

ps:有些开发者也喜欢用百分比来定义html fontSize 例如62.5%,绝大部分浏览器默认字体大小都为16px，所以62.5%*16 = 10，化成10px就方便写样式了~

3.touch事件

1.单点 

主要包括touchstart touchmove touchend，当然这是dom3的事件，要兼容的话最好写成事件绑定（addEventListener）的形式为好~~