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


Posted in HTML / CSS onAugust 17, 2017

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"/>

每个属性的详细介绍:

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

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中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 #HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 #HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 #HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 #HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 #HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 #HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 #HTML / CSS
You might like
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
基于php无限分类的深入理解
2013/06/02 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
php include和require的区别深入解析
2013/06/17 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
动态样式类封装JS代码
2009/09/02 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python select.select模块通信全过程解析
2017/09/20 Python
itchat接口使用示例
2017/10/23 Python
使用Python读取大文件的方法
2018/02/11 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
Python截图并保存的具体实例
2021/01/14 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
银行进社区活动总结
2014/07/07 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书