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 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
分享php分页的功能模块
2015/06/16 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP 实现缩略图
2021/03/09 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
WxPython建立批量录入框窗口
2019/02/27 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
浅谈Python 函数式编程
2020/06/20 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
详解python polyscope库的安装和例程
2020/11/13 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
Whistles官网:英国女装品牌
2020/08/14 全球购物
2015年科室工作总结
2015/04/10 职场文书
法人代表资格证明书
2015/06/18 职场文书