移动端手机适配_html/css_WEB-ITnose

今天来分享一下移动端网页适配。

背景

科技在不断的发展，人们的生活也在发生着翻天覆地的变化，其中一个重要变化就是移动设备的变化。手机，平板貌似都成了日常生活的必备。手机最初是作为一个通讯设备出现在人类的生活中，时至今日，手机已经不再是一个简简单单的通讯设备那么简单的事情了，更多的是作为一个娱乐和为生活提供更多方便的工具，离开了手机恐怕生活真的会没办法继续下去！既然手机已经如此普及，互联网如此广泛的今天，互联网产品的手机市场就显得尤为重要，作为互联网从业者，也就不得不考虑如何实现更多手机的功能了。web开发是互联网产品相当大的一部分，如何去适配手机设备，对于一个web前端开发工程师来说已经不是上升空间了，而是刻不容缓的一件事情。今天，我就来讲讲网页移动端适配的话题。

移动端网页适配，顾名思义就是网页在移动设备上如何做到完美的展现，理解起来很容易，但是实际情况却不容乐观，手机目前主要有Android和iOS两个系统占领大部分市场，曾经的iOS手机分辨率比较统一，开发起来对于前端来说适配还算是很容易的事情，自从iPhone6出现之后，这个现状似乎被残忍的打破了，Android市场就更是混乱不堪，各种屏幕，各种分辨率让人眼花缭乱，更让开发人员处于水深火热之中。通常情况下设计师做移动端网页会设计多个尺寸的设计图，但是这无疑加大了设计师和前端开发工程师们的工作量，然而又并没有什么卵用。那么要如何解决这个尴尬的局面呢？

下面我来简单讲一下我是如何来做这件事的吧，给大家做一个参考，也许并不是最优的解决方案。有更好的方式也可以加我微信公众号一起交流交流，进步源于分享嘛。在正文之前，上一张美图轻松一下眼睛吧。

怎么样，美美的绿色有没有让你放松一点？不管你有没有，下面进入正题吧。

最终实现的效果

设计图多大尺寸，我们写样式就写多大尺寸，利用sass变量自动转换成rem相对单位，在各种设备中自适应合理的尺寸。

首先我们需要在网页根元素即html中设置font-size，后面的rem将基于这个font-size来计算元素合适的尺寸。把如下代码放到head标签中，页面渲染结束就会生效，这个代码会向html标签中设置一个字体大小（这里以设计图宽度640px为例）

function setHtmlSize(){

var windowWidth = document.documentElement.clientWidth;

if(windowWidth > 800){

document.getElementsByTagName("html")[0].style.fontSize = 16 + "px";

}else{

var size = parseInt((document.documentElement.clientWidth / 640) * 20, 10);

size % 2 != 0 && size--;

document.getElementsByTagName("html")[0].style.fontSize = size + "px";

}

}

function updateOrientation(){ //这里是设备旋转

var orientation = window.orientation;

switch (orientation) {

case 90:

case -90:

document.getElementsByTagName("html")[0].style.fontSize = 10 + "px";

break;

default:

break;

}

}

setHtmlSize();

window.addEventListener("resize", setHtmlSize);

window.addEventListener("orientationchange", updateOrientation, false);

然后我们需要用到sass，因为sass可以像js一样写函数和方法，设置参数和变量等等。

新建一个.scss的sass文件，在里面添加如下代码

//适配retina屏文字大小

//demo: @include font-dpr(12px)

//-----------------------------------

@mixin font-dpr($font-size){

font-size: ($font-size / 20px) * 1rem;

}

//px转rem

//demo: px2rem(12px)

//-----------------------------------

@function px2rem($px, $base-font-size: 20px) {

@if (unitless($px)) {

@return px2rem($px + 0px); // That may fail.

} @else if (unit($px) == rem) {

@return $px;

}

@return ($px / $base-font-size) * 1rem;

}

然后在对应的地方引用这些方法就好了，比如设计图的文字为24px，我们就写

＊｛

@include font-dpr(24px)

｝

设计图的边距为30px，我们这样引用：

＊｛

margin: px2rem(12px)

｝

你以为这样就完了？

没错，这样就完了！

然而网页不支持scss的样式，所以我们需要将scss转换成css才可以被网页识别。那么如何将scss转换成css文件呢？可以查看我这一篇文章：

http://mp.weixin.qq.com/s?__biz=MzAwMDU4NjE3NA==&mid=405213045&idx=1&sn=2cb42ce85d5f4b98c77e1c55cadd474f#rd

由于这里没办法插入链接，所以只能麻烦大家复制链接打开，不好意思了。

由于时间的关系，暂且讲这么多，如果有什么更好的见解或者有什么错误指出，请关注个人公众号：年轻大叔进行反馈，我将于你一起进步。

如果您觉得我每天坚持写一篇文章不容易，不介意用打赏砸我，哈哈哈