浅谈web移动端适配问题

时间 2019-12-13

标签浅谈 web 移动适配问题栏目 HTML 繁體版

原文原文链接

1、布局方案css

目前在解决移动端页面适配问题方案选择上，目前用得比较可能是百分比布局，弹性布局flex，rem布局，本文将重点跟你们探讨rem布局。html

2、viewportweb

在介绍rem布局以前，首先跟你们介绍一下viewpoint视口。浏览器

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示咱们的网页的那一块区域，在具体一点，就是浏览器上(也多是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认状况下，通常来说，移动设备上的viewport都是要大于浏览器可视区域的，这是由于考虑到移动设备的分辨率相对于桌面电脑来讲都比较小，因此为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把本身默认的viewport设为980px或1024px（也多是其它值，这个是由设备本身决定的），但带来的后果就是浏览器会出现横向滚动条，由于浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。sass

三个viewport：layout viewport，visual viewport，ideal viewport安全

layout viewport：即为布局视口，dom宽度，浏览器默认状况下把viewport设为一个较宽的值，好比980px。（document.documentElement.clientWidth）app

visual viewport：浏览器可视区域的大小，屏幕宽度。（window. innerWidth）dom

ideal viewport：理想适口：使布局视口就是可见视口；ide

在进行移动设备网站的开发时，咱们须要的是ideal viewport。那么怎么才能获得ideal viewport呢？这就该轮到meta标签出场了。函数

咱们在开发移动设备的网站时，最多见的的一个动做就是把下面这个东西复制到咱们的head标签中：

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

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，以下：

width	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，能够带小数
minimum-scale	容许用户的最小缩放值，为一个数字，能够带小数
maximum-scale	容许用户的最大缩放值，为一个数字，能够带小数
height	设置layout viewport 的高度，这个属性对咱们并不重要，不多使用
user-scalable	是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许

3、js实现rem自动匹配计算font-size

利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值，一下是js代码：

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

此代码选640px为基准值，为何选640呢，

640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 表明 1px x 1px 的 css pixel，因此设备像素数为640 x 1136px，而它的CSS逻辑像素数为320 x 568px。

因此当要切移动端的页面的时候，须要把效果图宽度等比例缩放到640px。

好比当页面中某一div的宽度为60，高度为65的时候，就能够直接这样写样式：

{
    width:0.6rem;
    height:0.65rem
}

4、使用媒体查询进行适配

一下为sass写法，好比拿到的设计稿是iPhone6，设备宽为375px.设计稿采用的像素是物理像素，二倍屏(retina)750px,因此当计算的时候要除以2.

// REM 适配 <html>
$designWidth:375;
// 375px (iPhone 6)
// 此为基准值, 与视觉设计稿 `宽度/2` 保持一致
html {
    font-size:20px;
}
@media (min-width:320px){
  html{
    font-size: #{20*320PX/$designWidth} !important;
  }
}
@media (min-width:360px){
  html{
    font-size: #{20*360PX/$designWidth} !important;
  }
}
@media (min-width:375px){
  html{
    font-size:#{20*375PX/$designWidth} !important;
  }
}
@media (min-width:412px){
  html{
    font-size: #{20*412PX/$designWidth} !important;
  }
}
@media (min-width:480px){
  html{
    font-size:#{20*480PX/$designWidth} !important;
  }
}
@media (min-width:640px){
  html{
    font-size: #{20*640PX/$designWidth} !important;
  }
}
@media (min-width:720px){
  html{
    font-size:#{20*720PX/$designWidth} !important;
  }
}
@media (min-width:768px){
  html{
    font-size: #{20*768PX/$designWidth} !important;
  }
}
@media (min-width:1440px){
  html{
    font-size:#{20*1440PX/$designWidth} !important;
  }
}

为了减小单位换算的时间，加快编写代码的效率，能够采用函数自动换算：

@function torem($px){//$px为须要转换的字号
    @return ($px / 40) * 1rem; //40px为根字体大小
}

由于根字体为font-size：20px，设计稿采用2倍像素表示，因此除以20*2;（若是设计稿采用设备像素及跟屏幕尺寸同样的比例，则不用除以2）

好比一个div的在设计稿上的宽度是366px,高度为239px,则直接能够这样写：

div{
    width:torem(366);
    height:torem(239);
}

4、图片适配问题

当项目不须要对图片要求很高的话能够直接经过宽度适配，假如须要多不一样的分辨率要对图片进行更换的话，经过设备像素比实现图片更换。如下是解决办法：

bg-image($url)
  background-image url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
    background-image url($url + "@3x.png")

最后建议开发中采用百分百币局跟rem布局结合使用，固然flex布局也是能够。

5、具体适配实现要看设计稿给出来的模板而定。分享先到这里。