h5实现网页内容跟随窗口大小移动_HTML5实现移动页面自适应手机屏幕的方法

谁借莪１个温暖的怀抱￠ 2023-01-01 06:53 109阅读 0赞

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-scalableyes/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，如果某p宽度为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);

3、使用媒体查询

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

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

例如：如果浏览器窗口小于 500px, 背景将变为浅蓝色：@media only screen and (max-width: 500px) \{

body \{

background-color: lightblue;

\}\}

4、使用百分比

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

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

相关推荐：

HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结

javascript - 如何让生成的div自适应手机屏幕

页面会自适应手机屏幕大小，在里面的图片不能

发表评论取消回复

表情：

评论列表（有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5实现网页内容跟随窗口大小移动_HTML5实现移动页面自适应手机屏幕的方法

1、使用meta标签：viewport H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不

谁借莪１个温暖的怀抱￠/ 2023年01月01日 06:53/ 0 赞/ 110 阅读

相关 html5自动调整布局,HTML5教程移动端页面自适应布局详解

本篇教程探讨了HTML5教程移动端页面自适应布局详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。 < 在移动设备上进行网页的重构或开发

￡神魔★判官ぃ/ 2022年10月05日 12:57/ 0 赞/ 203 阅读

相关 h5页面自适应移动端 px2rem

<script> resize() window.onresize = function() { res

超、凢脫俗/ 2022年10月01日 13:57/ 0 赞/ 206 阅读

相关普通web网页自适应移动设备屏幕

<mate>标签的设置如下 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <me

末蓝、/ 2022年08月26日 00:45/ 0 赞/ 129 阅读

相关移动wap input登陆框自适应屏幕大小

<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/h

快来打我*/ 2022年08月23日 11:53/ 0 赞/ 119 阅读

相关 html5 Canvas 如何自适应屏幕大小

最简单使用Canvas元素： <canvas width="300" height="300"></canvas> 这样就创建出一个空白画布。但是这样创建出

悠悠/ 2022年05月29日 07:18/ 0 赞/ 647 阅读

相关手机html根据手机分辨率网页文字大小自适应

问题：不同手机型号屏幕尺寸大不相同，导致同样的文字，有的显示一行，有的显示多行。通过查资料和自己的尝试解决；网页开发习惯的px单位，手机html开发不适用。源代码如下：

àì夳堔傛蜴生んèń/ 2022年05月24日 13:07/ 0 赞/ 391 阅读

相关 h5移动网页唤起App

[https://www.cnblogs.com/simba-lkj/p/8027809.html][https_www.cnblogs.com_simba-lkj_p_802

迈不过友情╰/ 2022年04月24日 01:06/ 0 赞/ 216 阅读

相关移动端h5截屏实现

在实际的开发中，我们不难遇到移动端h5的开发，各种手机的兼容，安卓与ios，华为与小米，让我们头痛不已，在移动端海报截屏之中，网上有很多的案例，但是要么不稳定，要么需要的插件太

悠悠/ 2021年09月24日 12:54/ 0 赞/ 356 阅读

相关移动端h5页面尺寸大小

移动端h5页面尺寸大小移动端H5的尺寸一般设计为640x1136px。既满足了显示需求，又能降低用户加载图片需要的带宽。可以用各种分辨率的移动智能手机查看我们设计的...

灰太狼/ 2020年06月08日 16:34/ 0 赞/ 878 阅读