全国热线

025-86901720

全国监督投诉热线:9:00-23:00

如何让html5移动页面自适应手机屏幕

根据一个屏幕尺寸开发一个html5移动页面不太现实,能够做到自适应的话会省事很多。今天就让南京学码思web培训学校老师来给大家传授四招。

进入移动互联网时代,各种移动设备层出不穷,屏幕尺寸大小不一,对于同一个html5移动页面怎样让其自适应手机屏幕是前端开发工程师需要考虑的一个问题,毕竟根据一个屏幕尺寸开发一个html5移动页面不太现实,能够做到自适应的话会省事很多。今天就让南京学码思web培训学校老师来给大家传授四招。

如何让html5移动页面自适应手机屏幕

1、使用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"/>


每个属性的详细介绍:

11


2、使用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%)}


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

<script type="text/javascript">

   (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);

</script>


3、使用媒体查询


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


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


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


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


body {


background-color: lightblue;


}


}


4、使用百分比


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


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


以上就是前端工程师让html5移动页面自适应手机屏幕常用的四招,大家可以多学习借鉴一下。如果你还想学习更多web前端技巧和知识的话,可以直接咨询学码思在线老师,也欢迎大家亲自前来南京学码思web培训学校,领取直接web前端教程,还能进入课堂试听感受学码思web培训课程,与老师和学员面对面沟通交流。


上一篇:CSS布局常见的几个问题和解决方案
下一篇:零基础学web前端入门指导大全

相关推荐

免费试听 | 学费咨询 | 在线报名 | 申请补贴 | 软件培训 | 网站地图

2016-2020 南京学码思教育科技有限公司 .All Rights Reserved

苏ICP备16033487号 www.njxms.com.cn

全国热线

400-080-3312

全国监督服务热线:9:00-23:00