h5实现网页内容跟随窗口大小移动_HTML5 移动页面自适应手机屏幕四类方法
1、使用meta标签:viewport
H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
viewport标签极其属性:
每个属性的详细介绍:
属性名取值描述
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
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一次定义方法如下:
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);
3、使用媒体查询
媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。
媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。
例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:
@media only screen and (max-width: 500px){body {
background-color:lightblue;
}}
4、使用百分比
百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;
所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。
h5实现网页内容跟随窗口大小移动_HTML5 移动页面自适应手机屏幕四类方法相关推荐
- h5实现网页内容跟随窗口大小移动_HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结...
这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下 1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标 ...
- 移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
- h5实现网页内容跟随窗口大小移动_h5页面能流行于各大社交平台必定有其原因的...
现在,大家在朋友圈中都会经常看到一个幻灯片似的海报链接,这种类似于传单似的海报,其实在维本微传单的定义来说,它是一种以H5技术制作的微传单.朋友圈中的这些微传单大多通过文字.图片.音频.视频等进行组合 ...
- h5实现网页内容跟随窗口大小移动_如何制作HTML5页面让它适应电脑和手机的尺寸...
1. 利用meta标签 Meta标签主要用来描述一个HTML网页文档的属性,如作者.日期时间.网页描述.关键词.页面刷新等,它的Description和Keywords属性,可加入网站的关键字,让网页 ...
- h5页面自适应手机屏幕宽度
在html head中添加: <script type="text/javascript"> var phoneScale = parseInt(window.scre ...
- 设置H5页面适应手机屏幕
移动开发如火如荼,越来越多开发注重手机网页适应.因为要做微信公众号做报名网页,将做好的页面在手机上测试发现页面显示是典型的电脑页面在移动端打开的现象,左右显示不全,查了资料才知道要使页面适用手机屏幕, ...
- jsp页面适应手机屏幕_HTML5之页面缩放 viewport
一.前言 前短时间突然遇到一个需求,发现之前一直忽略的点. 二.故事背景 事情是这样的:是一个公共资源的项目.详情页的内容全部是由后端接口返回,带style样式的标签内容(即富文本),大多表格之类的. ...
- 移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
- H5网页开发新手入门-H5网页如何适应不同手机屏幕分辨率?
一.问题汇总 手机网页怎么制作? 怎么让网页适应不同手机屏幕? H5网页设计到底该设计多大尺寸? rem怎么自适应布局? H5一屛页面如何自适应屏幕? viewport该怎么写? width=devi ...
最新文章
- Nodejs开源项目推荐
- Function ALV可编辑列修改数据后与与内表数据同步问题
- SegmentFault Hackathon 文艺复兴
- Event Loop 其实也就这点事
- python是脚本语言_上海python脚本语言课程
- Unity Shader: 优化GPU代码--用step()代替if else等条件语句。
- mysql+8.0+新特性_MySQL 8.0备受瞩目的新特性大放送!
- rocketmq学习杂记
- 程序员分析了 50 万条拼多多商品数据,告诉你到底是消费升级还是降级!
- 《Orange'S:一个操作系统的实现》与上一版之比较
- 从CVPR2019看计算机视觉的最新趋势
- mfc中CImageList的使用
- figma学习记录 快捷键 工具了解(1)
- TensorFlow中相关的维度处理函数
- vue v-for遍历动态展示元素数量
- 【BZOJ 3653】谈笑风生
- 关于计算机网络的学习
- MIT多变量微积分--8.多元函数,等值面,偏导数,切平面逼近
- 飞扬的小鸟java分析_刷题总结——飞扬的小鸟(NOIP2014提高组)
- 韩顺平java--Collection 集合专题