H5移动端屏幕自适应原理

最新推荐文章于 2024-08-17 00:41:11 发布
最新推荐文章于 2024-08-17 00:41:11 发布
阅读量745 收藏
点赞数
分类专栏： 大前端 文章标签： html5 css3 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dtq007/article/details/104561799
版权

根节点字体大小 RFS，屏幕宽度 SW，浏览器默认字体大小DFS，对html font-size的缩放比rate = RFS/DFS，使用的长度a rem = p / RFS rem。选择一个标准：iPhone6，SW0=375px，RFS0设为50px。

自适应原理，内容随屏幕宽度进行变换。即当SW变换时，通过改变rate， 让 p进行变换，而a不变。SW1 / SW0 = p1 / p0 = (a * RFS1) / (a * RFS0) = RFS1 / RFS0 = rate1 / rate0。

一般直接给html的font-size设个百分数rate1 = SW1 / SW0 * rate0 = SW1 / SW0 * RFS0 / DFS. （DFS是无法改变的）

DTQX
关注
专栏目录
HTML5 移动页面自适应手机屏幕四类方法总结
09-27
主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值，需要的朋友可以参考下
移动端屏幕宽度自适应原理及实现
weixin_45997469的博客
07-22 863
移动端屏幕宽度自适应原理及实现 问题：当前市场上手机屏幕宽度不尽相同，常见有320px（ipone5）、375px（ipone678）等等，而为了在不同宽度的手机屏幕上良好现显示网页，我们需要解决方案。 原理：当前前端解决手机屏幕自适应的手段极多，究其原理，主要分为两大版块： 一、使用百分比长度单位，当前百分比长度单位一般如下：vw、vh、vm、em、rem、%，优点：一套css代码即可适应所有屏幕宽度不同的手机； 二、使用固定长度单位px，再使用js根据当前屏幕宽度与固定宽度计算比例，进行网页缩放。优点：
带你认识什么是移动端适配，及常见的几种方案（em，rem，vw，vh，...）
最新发布
qq_73220073的博客
08-17 841
原生App开发（iOS、Android、RN、uniapp、Flutter等）.小程序开发（原生小程序、uniapp、Taro等）.Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）：根据不同的设备屏幕大小来自动调整尺寸、大小：会随着屏幕的实时变动而自动调整，是一种自适应。
10分钟从原理分析移动端H5适配方案，让你适配不再慌乱（一）
weixin_33798152的博客
12-11 326
前言：前端的你，是否曾窃喜终于甩掉了IE6，却一个转身，猝不及防踏入移动端碎片大坑，今天过后，可以不用太过于纠结了，因为可以我帮你重塑对移动端的认识，从此以后，得心应手，提升效率不是梦。 知己知彼，百战不殆，我们前端开发也一样。知其然，知其所以然，不论从装逼或者实际开发的角度来说，都是百益而无一害的。我们来看一小段代码： <html style="font-size:75px;" > ...
移动端H5解惑-页面适配
qq_44845659的博客
08-12 283
移动端H5解惑-页面适配 一、基础概念 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？ 移动端H5解惑-概念术语（一） 二、为什么要做页面适配 2.1 PC端为什么要解决浏览器兼容 因为在PC端，由于浏览器种类太多啦，比如几个常用的：IE、火狐、Chrome、Safari等。同时，由于历史原因，不同浏览器在不同时期针对当时的WEB标准有一些不一样的处理（虽然大部分一样），比如：IE6、IE8、IE10+等对于一些JS事件处理、CSS样式渲染有所不同。 而恰恰又
移动端适配原理
weixin_42588966的博客
11-25 437
说到移动端适配，做前端的同学肯定不会陌生，面试的时候可能也会问到相关问题。为何要写这篇文章？我最近学习移动端适配，参考了很多文章，写的都很不错，但是感觉都不太全面，对小白同学不太友好，所以今天写下这篇文章，记录下自己的一些思考，免得遗忘，也希望能够帮助到和我一样对这个问题感到迷惑的同学。 1. 一些概念 想要弄懂适配问题，你需要了解很多单位的含义：PX，PT，PPI，DPR，viewport … ...
remjs移动端页面满屏H5自适应方案
08-11
本文将深入探讨一个基于rem的移动端页面满屏H5自适应方案，该方案适用于设计稿为750 * 1334或640 * 1334的情况。我们将讨论rem布局的优势、实现原理以及如何应用到实际项目中。 首先，rem（root em）是CSS3引入的一...
H1046_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
“H1046”压缩包中的H5模板正是应用了这些原理，采用自适应策略，能够根据用户的设备类型和屏幕大小自动调整其布局和显示方式。这不仅提高了用户体验，还减少了开发时间和成本，因为只需要维护一份代码库，而非针对...
H60_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
【标题】"H60_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip" 涉及的是一个专为手机网站设计的HTML源码包，它包含了移动端前端开发的重要元素，如H5模板和自适应响应式设计。此资源对于希望创建或...
x36_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
"x36_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip" 提供的正是这样一套解决方案，它涵盖了HTML5模板设计、手机网站开发、前端源码实践以及移动端适配等多方面内容。 首先，我们要理解HTML5模板的...
HTML 文件在PC&移动端完美自适应布局的技巧
腾讯技术工程
10-30 2409
本文作者：李晓玮，腾讯 IEG 高级工程师都2019年了，手机查看HTML邮件的体验怎么还那么差？试想一下，你在夜深人静的时候，准备睡前查看一下订阅的邮件周报，而且还是一...
移动端自适应解决方法(原理是rem布局)
weixin_68658847的博客
01-20 597
移动端自适应解决方法(adaptive插件,原理是rem布局)
html和css自适应页面原理！
dazhe5的博客
04-03 1835
一直有研究自适应，总是没什么进展，无意中发现了一个css库 @media screen and (min-width:480px) 这里说明一定要大于480px里面的css才会生效 @media screen and (max-width:480px) 这里说明一定要小于480px里面的css才会生效 另外还需要再head里面添加俩meta
html5布局原理,Html5移动端页面自适应布局详解(rem布局)
weixin_28675557的博客
06-01 495
Html5移动端页面自适应布局详解(rem布局)在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后大概viewport可以理解为三种1。layout viewport,也就是这个浏览器默认的viewport2。visual viewport,浏览器可视区域viewport3。ideal viewport,移动设备的理想...
H5 宽高自适应学习笔记
weixin_46589032的博客
03-31 1259
宽高自适应 第一节：宽的自适应 width:100%;或者是width不去设置，子元素宽度跟随父元素。 第二节：高度自适应 （高度不去设置，或者高度设置auto -> 内容撑开父元素的高度） ...
h5页面在手机图片不显示电脑可以显示_什么是H5自适应网站？
weixin_39947521的博客
11-27 673
H5自适应网站能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。虽然专门为手机或者平板电脑设计的移动网站，一样能满足部分访问者的需求。但据数据调查显示，网民常用常用的移动终端设备有230多种不同的屏幕尺寸，我们不可能为230多种屏幕尺寸都单独设计一个网站。这就是H5自适应的价值所在。传统网站有什么不足？1、传统网站，对各种IE、浏览器和操作系统，没办法完全兼容2、非响应式网站：要制作...
移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题
mm
02-04 691
rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小 问题的原因无非就是html一开始没有设置字体大小嘛，那我们就一开始按最常用的iPhone 6 尺寸，设置html的font-size: 50px;好了，设置html的font-size: 50px;就合理了吗？我的回答是，至少变化的范围非常小，以360px宽的设备为例，根字体大小应该是48px；以前相当于是从0px-48px，现在是50px-48px，不会造成很明显的闪烁问题。 至于为什么设置为50px；首先，设计稿是基于750px.
[转]移动前端自适应解决方案和比较
weixin_34007906的博客
04-02 2993
移动前端自适应解决方案和比较 昨天晚上仔细看了这篇文章，写的很好，转载下来，常记于心. 以下文章摘自:前端开发博客 (http://caibaojian.com/mobile-responsive-example.html) 以下为正文: 互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用f...
H5移动端适配：Flexible方案详解
"本文主要介绍H5移动端适配的Flexible方案，探讨了移动端适配的基本概念，包括视觉稿、物理像素、设备独立像素和设备像素比，并解释了如何利用这些概念进行高清适配和布局处理。" 在H5移动端开发中，适配问题是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值