H5页面的适配问题 页面自适应 移动端设配问题

已于 2022-07-13 13:54:55 修改
阅读量2.4k 收藏 4
点赞数
文章标签： 前端 javascript html5 css3 web app
于 2022-07-12 17:56:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69085594/article/details/125748261
版权

随着现在手机屏幕越出越大的趋势，移动端适配就显得很重要 ，如何才能在不同屏幕大小不一样的时候，页面布局稳如老狗呢 ，就会想到移动端的适配问题！

其实网上有很多关于移动端适配的文章，但是个人比较喜欢的是

获取手机屏幕的大小 ，给html根节点定义font-size，子节点都可以用rem来做单位标准

定义完成之后 ，无论屏幕有多大，根节点的字体都会随着屏幕变大而变大！

 之后就是给html根元素设置字体大小

 以上都设置完成后就可以利用rem来做H5页面的适配了，无论是padding、margin都可以利用rem来确定距离、大小。

只是个人比较喜欢的一种方式，可能还会有缺陷，如果哪位小伙伴发现了，欢迎留言！

喜欢kk的小白
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5自适应屏幕分辨率大小
weixin_33671935的博客
08-15 2185
　说明： ①：H5自适应不同分辨率的设备，其实主要就一句 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> width=device-width 屏幕宽度；initial-scale...
html5页面移动端适配JS插件
11-30
html5页面移动端自适应插件； html5页面适配插件，移动端自适应； m-base.js
前端H5框架自适应模板
11-12
页面自适应，750px*1334px模板，也就是font-size:20px模板，自行换算
移动页面自适应手机屏幕宽度
menglexinglai的专栏
10-10 2591
网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。 1、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释该标签的含义： 如果你完全不了解这个标签的使用需要先百度一下。 解释：content中的“width” 这个wi
前端页面如何自适应--4种方法
weixin_46991199的博客
02-19 1260
前端页面如何自适应--4种方法
HTML5 移动页面自适应手机屏幕四类方法
Pannahouse的博客
12-13 1355
HTML5 移动页面自适应手机屏幕四类方法
H5 页面适配所有 iPhone 和安卓机型的六个技巧
热门推荐
极北三少
04-25 2万+
目前，很多APP设计师小伙伴已经开始转向H5前端开发啦，但是解决所有iPhone和安卓机型的适配问题是我们的重中之重。无论是设计APP还是写前端H5.都是要考虑移动端的兼容性。 25学堂今天跟大家来回顾一下H5页面去适配所有iPhone和安卓机型的一些技巧和办法。 回归正题，兼容iphone各版本机型最佳的方式就是自适应。 1、viewport 简单粗暴的方式： <meta n...
h5移动端屏幕适配方案（rem、vw）
醉逍遥neo的博客
09-25 2万+
1、概述 移动端屏幕大小不一，要使网页能自适应不同尺寸的手机屏幕，而且还要尽可能开发便捷，目前使用最多的还是rem大法，相对比较成熟，而新兴的vw方案也可以一试。 本文主要介绍了rem和vw两种方案的使用配置方式。 2、meta设置 首先移动端要设置好视口，使视口的宽度等于设备屏幕宽度，同时浏览器识别后就认为该网页是移动端网页，也就不再有点击延迟的问题了： <meta name="viewport" content="width=device-width, initial-scale=1.0, use
强大的屏幕适配布局rem响应式 实现一套web代码多端自适应适配 （实用、赞）
chelen_jak的专栏
11-09 2995
原文出处：https://blog.csdn.net/qq_14997169/article/details/53914201 实现强大的屏幕适配布局 流式的布局、固定的宽度，还有响应式来做，但是这些方案都不是最佳的解决方法。-&gt;-&gt;rem rem是什么？     rem（font size of the root element）是指相对于根元素(html)的字体大小的单位。...
超详细讲解 H5 移动端适配方案
weixin_62897746的博客
11-01 2100
在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。
超详细讲解H5移动端适配
程序员成长指北
09-08 1679
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言移动互联网发展至今，各种移动设备应运而生，但它们的物理分辨率可以说是五花八门，一般情况UI会为我们提供375尺寸的设计稿，所以为了让H5页面能够在这些不同的设备上尽量表现的一致，前端工程师就不得不对页面进行移动端适配了。「如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者前置知识在学习移动...
移动端+pc端自适应适配解决方案
06-29
适用于前端H5 pc端的适自创适配方案，有效解决各个尺寸适配，根据浏览器可视区域自适应元素，使用方法：将资源下载下来，放入单独js文件中，独立写成一个全局方法，如果是vue项目就在main.js中引入。如果是原生js...
Vue移动端适配项目文件
06-11
超好用，移动端开发不用愁了，自适应全局
PHP轻量级人工在线客服系统源码 自适应手机移动端
08-14
系统自动适配移动端，也可以接入app（h5方式） 支持微信公众号/微信小程序 客服可以与微信公众号/小程序里的访客实时沟通 常见问题自动回复 支持设置常见问题，顾客可以点击常见问题系统会自动回复 客服分组 支持...
h5rem自适应框架
12-14
移动端h5页面rem适配
JEECG表格选中状态怎么去掉
最新发布
weixin_39031037的博客
04-19 413
官网代码（在取消选中状态的时候不生效）
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1008
​​​​​​​。
【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-18 742
2、开发环境为TOMCAT7.0,Myeclipse8.5开发，数据库为Mysql5.0，使用java语言开发。(5)投票选项管理：对投票选项信息进行添加、删除、修改和查看。(6)投票记录管理：对投票记录信息进行添加、删除、修改和查看。(1)管理员管理：对管理员信息进行添加、删除、修改和查看。(2)用户管理：对用户信息进行添加、删除、修改和查看。(3)公告管理：对公告信息进行添加、删除、修改和查看。(4)投票管理：对投票信息进行添加、删除、修改和查看。4）投票浏览查看、查看投票、投票记录。
h5页面高度宽度自适应
06-10
在 H5 页面中，可以使用 CSS 的单位和属性来实现页面的高度和宽度自适应。 1. 使用百分比单位：在设置元素的高度和宽度时，可以使用百分比单位，这样元素的大小会根据其父元素的大小进行适应。 2. 使用 vh 和 vw 单位：vh 和 vw 分别表示视口高度和宽度的百分比，可以使用这两个单位来设置元素的高度和宽度。 3. 使用 Flex 布局：使用 Flex 布局可以轻松实现页面内容的自适应布局，可以根据不同的屏幕尺寸和设备方向动态调整页面布局。 4. 使用媒体查询：可以使用媒体查询来针对不同的设备和屏幕尺寸设置不同的样式，从而实现页面的高度和宽度自适应。 5. 使用 JavaScript：可以使用 JavaScript 来获取浏览器窗口的大小，然后动态设置元素的大小和位置，从而实现页面的自适应布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值