用rem为单位写自适应的页面

最新推荐文章于 2021-11-27 23:22:18 发布
最新推荐文章于 2021-11-27 23:22:18 发布
阅读量807 收藏
点赞数 1
分类专栏： html5+css3 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzs12345/article/details/78342857
版权 
<!DOCTYPE html>
<html lang="en">
<head> 
 <meta charset="UTF-8">  
 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  
<script>   
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script> 
<title>标题</title> 
</head>
<body>

</body>
</html>
单位用rem换算1rem=100px;

爱学习的小兔子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3自适应布局单位vw,vh详解
sunlizhen的专栏
10-30 3858
视口单位(Viewport units) 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小...
web页面自适应，rem作单位
09-23
js代码实现页面自适应，css样式可以用rem来做单位，实现界面随浏览器变化而自适应大小
rem 单位实现页面自适应布局
weixin_33890526的博客
09-25 178
A. 先看一个函数： /* * 设置根元素字体大小 * @param Number minSW 最小缩放的设备屏幕宽度 * @param Number maxSW 最大缩放的设备屏幕宽度 * @param Number minFS 最小的宽度对应的字体大小 * @param Number maxFS 最大宽度对应的字体大小 ...
前端自适应----单位rem
止于至善
11-21 1343
下边是大神对《移动前端自适应解决方案和比较》的链接： 移动前端自适应解决方案和比较通过使用，自我感觉网易的解决方案是最方便我们使用时候的计算。 代码：(function(factory){ factory(); window.addEventListener('resize',factory,false); }(function(){ var width = documen
分享一个rem的网页布局写法
qq_40816649的博客
05-22 1147
最近写网站布局的时候碰到了一个比较头疼的客户，然后这个网站也是接别人的尾一些要求都不清楚。网站写完后客户验货的时候电脑屏幕不一样大我的电脑上显示是正常的，到了客户电脑上就变样了，这样子对于后期和客户的沟通调整产生了很大的问题。经过这个网站的洗礼，决定找一个解决的办法，这里借鉴了某大神的做法就是用rem进行html编写。以rem为单位进行屏幕大小的动态调整，最终的结果无论在什么屏幕下显示的比例都是一...
移动端REM响应式模板及相应规范
不懂小彬的博客
04-26 1258
M端模板 html> head> meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> meta charset="utf-8"> meta name="viewport" content="width=device-width,initial-scale=1,maximum-scal
详解vue-cli中使用rem,vue自适应
11-27
通过统一设置根元素的字体大小，我们可以用`rem`来控制整个页面的比例，从而实现不同屏幕尺寸下的自适应布局。 ### 2. `rem.js`内容解析 在提供的`rem.js`脚本中，可以看到以下关键步骤： - 获取文档的`document....
手机端页面rem宽度自适应脚本
12-10
我们的设计图往往宽度是640或者其他尺寸的，不过我建议是用这个尺寸，以640为基准，以小到大，实现自适应，下面实现的比例为1rem=40px(640宽度)。 为什么这样搞？ 这样一套代码就搞定手机端尺寸自适应，不需要媒体...
使用Rem布局实现自适应
11-21
这样，我们只需要设置CSS样式时使用Rem单位，而不是像素，就可以确保元素在不同设备上按比例缩放，保持与视觉稿一致的布局。例如，原来的351像素宽的元素，转换为Rem后可能是`351 / 750 * 7.5`。 通过这种方式，...
移动端rem自适应（最简单的解决方案）
木易的博客
12-29 2632
今天主要介绍的是在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局。 什么是rem？ rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理，这里暂且不表。rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px =
根据浏览器窗口大小的自适应 单位
青菜陪白豆腐的博客
06-18 1万+
小白心得        今天在做页面的时候发现当我把浏览器窗口缩小的时候，里面的控件溢出我想要的边界了，然后我到之前在网上看到的所谓“自适应”这个词语，我查了一下这个“自适应布局”，它又叫做响应式布局，主要是针对页面在不同的设备不同的屏幕大小不同的分辨率下对页面布局的自动适应，其实在我的理解里就是传说中的等比例缩放，或许这也并不是绝对的，只是个人的理解而已。现在有很多前端开发框架都有响应式布局的功...
html自动适应页面的单位,关于网页自适应百分比单位的使用
weixin_42300040的博客
06-02 661
许小珂最近在研究自适应布局，深入研究让许小珂确实对css的属性的理解的更深刻了。今天就来介绍一下网页自适应所使用的百分比单位，希望能解大家的迷惑。不正确的地方也请高手指点出来，许小珂不胜感激。大家都知道百分比单位的取值不是相对于自身的，大部分都是相对于父元素。一个我们最经常使用的宽度取值公式:目标宽度÷父元素宽度=结果(比例宽度)即当前元素的像素宽度÷当前元素的父元素的像素宽度=当前元素的百分比宽...
html自动适应页面的单位,rem 单位实现页面自适应布局
weixin_36387104的博客
06-02 559
A. 先看一个函数：/** 设置根元素字体大小* @param Number minSW 最小缩放的设备屏幕宽度* @param Number maxSW 最大缩放的设备屏幕宽度* @param Number minFS 最小的宽度对应的字体大小* @param Number maxFS 最大宽度对应的字体大小* @return undefined*/function setRootFS(minS...
REM自适应JS（px自动转化为rem）
热门推荐
alleged的博客
01-11 3万+
前文介绍了rem，在这里介绍两种实际使用rem的例子; flexible.js可伸缩布局使用 原文出处：前端开发博客 (http://caibaojian.com/simple-flexible.html) 链接:http://caibaojian.com/simple-flexible.html 来源:http://caibaojian.com 两种方式的优劣： 1、第一种方式使用上
移动端适配
weixin_30865427的博客
01-02 432
作为一个前端开发人员，我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前。而现在的设备大小尺寸不一，近年来智能手机的普及更是让网页的用户大部分来源与手机，所以让不同大小的移动端屏幕都能较好的还原设计稿就成了一个前端开发者需要解决的当务之急。我查阅了大量资料和进行了一些实践，下面是我对移动端适配的一些认识。 首先我们来谈谈我们在电脑端用的字体单位px和em 在国内的网站中大多都是使用px...
[转]移动前端自适应解决方案和比较
weixin_34007906的博客
04-02 2977
移动前端自适应解决方案和比较 昨天晚上仔细看了这篇文章，写的很好，转载下来，常记于心. 以下文章摘自:前端开发博客 (http://caibaojian.com/mobile-responsive-example.html) 以下为正文: 互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用f...
超硬核前端众单位计算方式，自适应响应式爱好者必看
weixin_45966674的博客
11-27 455
px 这个单位在实际开发中也会用到，但他是无法实现一个屏幕的适应的 计算方式 1px = 1个橡树点 每个屏幕的像素点都是不一样的，大屏幕台式机可能有两千多像素点，小屏幕手机几百橡树点的也很多 所以用px写的页面 除非掺杂其他单位 否则很难适应所有屏幕 in in 是一种很少见的字体单位，老实说做了这么久开发我也基本没见过谁用这个单位的 计算方式 1in = 1英寸 即2.54厘米 显然也是一种无法适应的单位 cm 也是一种很少见的单位，完全没有在项目中看见过 计算方式
rem自适应布局用法及详解
前端~锋小张
04-26 1万+
对于很多新同学来说，rem还是比较熟悉而又陌生的， 熟悉呢是因为rem时常出现在耳边，陌生呢是因为又搞不清原理。今天咱们一起来弄清楚rem到底是怎么一回事！原理：css3规定：1rem的大小就是根元素&lt;html&gt;的font-size的值。通过设置 根元素&lt;html&gt;的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等， ...
前端实现自适应
weixin_43588439的博客
03-19 1037
前端想实现随着网页的大小，网页中的元素也会动态的改变大小。可以通过rem或者em来实现。 由于px是像素值，可以理解为是绝对大小，自适应要是实现的是相对大小； em是随着同级别下的font-size的大小改变进行改变； rem是随着根的font-size的大小改变进行改变。 我们暂时选择rem来实现自适应。 思路为，在js中获取网页的宽度，来动态的改变font-size的大小。比如现在对宽度进行2...
html文件前端页面 做样式自适应rem 代码
最新发布
04-28
可以使用以下代码实现基于 rem 的自适应布局： ...<!... <title>rem 自适应布局...在样式中，我们可以直接使用 rem 作为单位，比如设置宽度为 6.4rem（即 64px），高度为 3.6rem（即 36px），这样就可以实现自适应布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值