HTML5 移动页面自适应手机屏幕四类方法
发布在移动端2017年12月14日view:2041移动开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

使用meta标签:viewport

viewport是用户网页的可视区域。翻译为中文叫做“视区”

手机浏览器是把页面放在一个虚拟的“窗口”(viewpoint)中,通常这个虚拟的“窗口”(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] 定义初始缩放值
minimun-scale [0.0 - -10.0] 定义缩小最小比例,它必须小于或等于maximun-scale的设置
maximun-scale [0.0 - 10.0] 定义放大最大比例,它必须大于或等于minimun-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面,默认值yes

使用css3单位:rem

em是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

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

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

默认html的front-size是16px,即1rem=16px,如果某div宽度为32px你可以设置为2rem。

通常情况下,为了便于计算数值则使用62.5%,即默认的10px作为技术。当然这个基数可以为任何数值,视具体情况而定。设置方法如下:

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

具体不同屏幕下的规则定义,即基数的定义方式:可以通过CSS定义,不同宽度范围里定义不同的基数值,当然也可以通过js一次定义方法如下:

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = 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);

使用媒体查询

媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

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

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

使用百分比

百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;

所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

评论
发表评论
3个月前
添加了一枚【评注】:我在这里
5个月前

我脑海中的2018的优秀面试题 https://github.com/976500133/FETopic

6个月前
添加了一枚【评注】:222
6个月前
添加了一枚【评注】:111
WRITTEN BY
娜娜娜娜
本人已懒到爆……
TA的新浪微博
PUBLISHED IN
移动端

就是手机啦~

我的收藏