HTML5 移动页面自适应手机屏幕四类方法

 

 一、使用meta标签：viewport

H5移动端页面自适应广泛使用的方法，理论上讲使用这个标签是能够适应全部尺寸的屏幕的，可是各设备对该标签的解释方式及支持程度不一样形成了不能兼容全部浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文能够叫作"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，一般这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每一个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户能够经过平移和缩放来看网页的不一样部分。

viewport标签极其属性：

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

 

每一个属性的详细介绍：

        

属性名

      

取值

   

描述

  
   

width

  

正整数 或 device-width

  

定义视口的宽度，单位为像素

   

height

  

正整数 或 device-height

  

定义视口的高度，单位为像素，通常不用

   

initial-scale

  

[0.0-10.0]

  

定义初始缩放值

   

minimum-scale

  

[0.0-10.0]

  

定义缩小最小比例，它必须小于或等于maximum-scale设置

   

maximum-scale

  

[0.0-10.0]

  

定义放大最大比例，它必须大于或等于minimum-scale设置

   

user-scalable

  

yes/no

  

定义是否容许用户手动缩放页面，默认值yes

二、使用css3单位rem

rem是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，全部浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px;font-size:.875rem;}

 

默认html的font-size是16px，即1rem=16px，若是某div宽度为32px你能够设为2rem。

一般状况下，为了便于计算数值则使用62.5%，即默认的10px做为基数。固然这个基数能够为任何数值，视具体状况而定。设置方法以下：

Html{font-size:62.5%(10/16*100%)}

+434623999群交流学习，领取资料

具体不一样屏幕下的规则定义，即基数的定义方式：能够经过CSS定义，不一样宽度范围里定义不一样的基数值，固然也能够经过js一次定义方法以下：

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif

<script type="text/javascript">

   (function(doc, win) {

      vardocEl = doc.documentElement,

        resizeEvt ='orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function (){

          varclientWidth = docEl.clientWidth;

          if(!clientWidth) return;

          docEl.style.fontSize = 20* (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值作适当的变化

        };

      if(!doc.addEventListener) return;

     win.addEventListener(resizeEvt, recalc, false);

     doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);

</script>
 

+434623999群交流学习，领取资料

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif

三、使用媒体查询

媒体查询也是css3的方法，咱们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。

媒体查询的功能就是为不一样的媒体设置不一样的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

例如：若是浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {

    body {

        background-color:lightblue;

    }

}

四、使用百分比

百分比指的是父元素，全部百分比都是这样的。子元素宽度50%，那么父元素的宽度就是100%；

因此body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就能够了，这只适合布局简单的页面，复杂的页面实现很困难。

+434623999群交流学习，领取资料