h5的rem代替px做移动端界面的自适应

最新推荐文章于 2024-07-09 15:20:07 发布

Subr

最新推荐文章于 2024-07-09 15:20:07 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/admom/article/details/90703712

版权

这两天要把公司以前的触屏设备的客户端应用做成h5的web应用，而且有针对不同设备和同一设备下的不同状态(有windows竖屏和横屏和android的平板)，总想把它做成能适配不同设备分辨率的东西，所以来研究這个问题。

因为在之前的公司做过的项目中的某些模块参照过别的产品，发现过有用rem和em的，然后就来网上研究学习了解了下这几种相对单位。其中就找到了这篇文章：http://is

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Subr

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

移动端自适应布局解决方案：rem布局

weixin_41190571的博客

07-02

493

之前写了一篇rem布局的文章，今天拿出来发现已经过时了。于是再来写一遍！ 2018.10.24更新首先在html里面设置一下视口： <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 然后在你的页...

使用 rem 实现移动端的自适应布局

qq_15972061的博客

09-29

500

先看一下网上对 rem 的介绍：rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小；设计思路：可以看出 rem 是一个相对长度单位，而且是 “相对于根元素html的font-size计算值的大小”，例如：我们设置一页面的 html 标签的 font-size 为 16px,如下： html { font-size: 16px; } ...

1 条评论您还未登录，请先登录后发表或查看评论

移动端rem自适应设置

weixin_30835933的博客

11-21

171

对于移动端自适应各种终端的解决方案较多，本篇只是选择其中一种rem适配，我个人做移动端最喜欢的方案。 rem就是以html根元素的字体大小为参考，比如html:font-size:20px;1rem=20px;2rem=40px.....，因为移动端的屏幕特殊之处，主要是不同类型手机像素比dpr的不同，所以不能直接使用px来进行设置元素的尺寸，这里就需要引入一个可以兼容各种尺寸的解决方案，rem...

兼容性问题---H5屏幕适配方案

最新发布

COCOLI_BK的博客

07-09

612

这些计量单位可以用来设置元素的宽度、高度、字体大小、边距、内边距等各种样式属性。使用合适的计量单位可以提高网页的响应性和灵活性，并确保在不同设备和屏幕尺寸上都有良好的显示效果。实现方式为：动态设置页面根元素大小，同时配合postcss-pxtorem插件pxtorem自动转换插件；第二步：配合px自动转rem的插件：postcss-pxtorem。：使用媒体对象@media根据屏幕的宽度设置不同的根元素大小。第一步：动态设置页面根元素大小。使用js动态设置根元素大小。

移动端rem自适应布局

l-ddui的博客

02-11

503

1 使用插件（类似的插件还有很多） postcss-px2rem-exclude 和lib-flexible 搭配使用 npm i postcss-px2rem-exclude npm i lib-flexible 2 配置在项目根目录（src）下，新建 postcss.config.js 文件 module.exports = { "plugins": { "autoprefixer": {}, "postcss-px2rem-exclude":{

h5 rem换算px

背着电脑走江湖的博客

04-28

291

(4 *window.innerWidth / 750) * 100 4 代表 rem的实际大小

移动端h5框架自适应_最佳移动端h5自适应rem适配方案

weixin_42382398的博客

01-14

1244

一、利用lib-flexible、postcss-plugin-px2rem插件进行移动端rem适配。1、第一引入lib-flexible .安装lib-flexible：　　npm i lib-flexible --save-dev在项目的入口main.js文件中引入lib-flexible:import 'lib-flexible'，在index.html中是否去掉metaname=...

remjs移动端页面满屏H5自适应方案

08-11

本文将深入探讨一个基于rem的移动端页面满屏H5自适应方案，该方案适用于设计稿为750 * 1334或640 * 1334的情况。我们将讨论rem布局的优势、实现原理以及如何应用到实际项目中。首先，rem（root em）是CSS3引入的一...

移动端H5自适应js

verwei的博客

04-08

1121

// class ! function(navigator) { var userAgent = navigator.userAgent; documentElement = document.documentElement; if(userAgent.match(/micromessenger\/5/gi))...

h5rem自适应框架

12-14

"h5rem自适应框架"正是解决这一问题的一种方法，它通过使用rem（root em）单位实现页面元素的自适应布局，确保在不同分辨率和屏幕尺寸的设备上都能保持良好的视觉体验。 rem（root em）单位是相对于根元素（通常是...

自己写一个REM的配置

LaoYangSaid的博客

09-09

152

;(function(){ /* 以750px的宽度的设计图为标准动态的设置html 的fontSize 达到缩放的效果 */ var doc = document.documentElement, // 获取到html元素 resize = function(){ var WIDTH = doc.clientWidth, fontSize = WIDTH * 100

移动端h5自适应rem适配

何婷的博客

10-12

2023

虽然在网上也找到很多关于这个rem的自适应，但是还是要找合适自己的项目的，一般设计稿都是750*750的。所以我给大家分享的这个rem，直接可以复制过去可以用，不过还得注意你们设计给的设计稿的宽高，项目中用的话宽高直接 /10px就行，轻松加愉快的用起来哈直接上代码哈 (function(designWidth, maxWidth) { var doc = document, win = wi...

rem、px、em(手机端h5页面屏幕适配的几种方法)

热门推荐

github_36758028的博客

12-06

4万+

px px像素（pixel）：相对长度单位。相对于显示器屏幕分辨率而言。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。 em 相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。那么你在body里字体大小就是1em=8px了。可

移动端rem布局导致页面加载瞬间无样式

陈小穗子

11-14

4107

移动端rem布局导致页面加载瞬间无样式

android h5 rem插件,H5 活动页之移动端 REM 布局适配方法

weixin_42501688的博客

05-27

126

本文介绍的方案来源于一次 H5 活动的开发实践。 H5 DEMO 参考：bir2017拿到设计稿后，如何进行布局还原？如果只需要做非精确的响应式设计，那么使用媒体查询来实现就 OK 了。如果需要精确还原设计稿，则一般通过缩放来实现，常见的缩放方案有基于 viewport 和基于 rem 的布局适配方法。1 viewport 缩放方案在移动端，可以通过 viewport 缩放页面大小比率达到目的。简...

H5的页面存储、移动页面适配、常用的相对单位

m0_74343097的博客

01-03

1247

H5的页面存储、移动页面适配、常用的相对单位

CSS的单位及css3的calc()及line-height百分比

hsany330的专栏

08-07

876

说在前面的话阳历2014年已经离我们远去，2015年接踵而来。祝大家新年快乐！在新的一年，我将有新的蜕变！这是2015年的第一篇文章，写一篇关于css的单位的文章吧！单位介绍说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的

超详细讲解 H5 移动端适配方案

weixin_62897746的博客

11-01

2568

在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。

CSS3新单位rem在H5手机端开发的应用解析

“H5手机端开发制作之新单位rem说明文档” 在移动设备的Web开发中，适应不同屏幕尺寸和分辨率的需求变得越来越重要。传统的百分比布局虽然具有一定的灵活性，但在处理不同屏幕尺寸下的字体和元素大小时，往往无法...