html用自适应rem单位的配置

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

直接上案例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		html {
			font-size: .32rem;
		}
		
		body {
			flex: 1;
			overflow: hidden;
		}
		
		.abnormalRepair {
			width: 100%;
			height: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #ffffff;
			text-align: center;
		}
		
		.abnormalRepair img {
			width: 2.44rem;
			height: 2.63rem;
			margin-top: 1.8rem;
		}
		
		.abnormalRepair span {
			display: block;
			margin-top: .58rem;
			font-size: .36rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #393C3C;
			line-height: .36rem;
		}
	</style>
	<script>
		;
		(function(win, doc) {
			'use strict';
			var options = {
				width: 750,
				dpr: win.devicePixelRatio
			};
			var html = doc.documentElement,
				width = html.g
最低0.47元/天 解锁文章
世俗ゝ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 自适应单位vw,CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比
weixin_29124423的博客
06-10 827
css单位我们常用的是px,也即是像素。随着网页开发自适应的要求，css3新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等。em做前端的应该对em不陌生，不是什么罕见的单位，是相对单位，参考物是父元素的font-size，具有继承的特点。如果字体大小是16px(浏览器的默认值)，那么 1em = 16px。不过，这样使用很复杂，很难很好的与px进行对应，因此，前端开发的前辈们总...
html 中rem是什么单位,了解并使用CSS中的rem单位
weixin_39525243的博客
06-10 3507
什么是 rem可能在你使用收音机或者用其他音乐播放器之前，就已经听过“R.E.M.”这个词了。在这个乐队眼中，这个词是“浅睡眠时眼球的快速转动”的缩写，而在 css 中，rem 代表着“以根元素为参照物的 em 单位“。他不会让你抛弃你的宗教信仰也不会让你相信那个远在月球的人，但是它可以帮助你实现一个和谐、平稳的设计。根据 W3C 规范中对 1rem 的定义：1rem 与等于根元素 font-...
转载（web app变革之rem）
weixin_30699741的博客
12-26 752
rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么？ rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到r...
html 原生项目屏幕适配(rem, flexible.js)
最新发布
localhost
05-17 253
html 原生项目屏幕适配(rem, flexible.js)
html如何运用rem自适应
wangongchao的博客
08-26 798
？如何使用rem 通常设计师提供的效果图都是指定宽度的效果，如750px等，因此可以在编写html时，一开始就设置整个dom文档html标签的font-size，假设设置的font-size为x，然后页面的其他元素便可以根据这个参照点，计算出大小并以rem作为单位。 ？如何适配分辨率不同的设备 可以动态的改变上述中的x值，即可使得页面中设置了rem的元素大小对应变化。 因此可以在html文档中添加javascript脚本，动态设置x。相关代码： ;(function(win, doc) { 'use
html rem自适应移动端
qq_42957741的博客
12-12 306
随着窗口的大小来改变字体大小。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
详解vue-cli中使用rem,vue自适应
10-17
本文将详细介绍如何在`Vue-cli`项目中使用`rem`单位和实现Vue的自适应布局。 首先，我们需要理解`rem`（root em）单位。`rem`是相对于根元素（通常是`html`元素）的字体大小的单位，这使得我们可以统一调整整个页面...
vantUI css文件H5自适应REM处理项目
03-13
该项目主要关注的是在 H5 页面开发中，如何利用 vantUI 的 CSS 文件并结合 REM 单位实现自适应布局。REM（Relative Em Unit）是一种相对单位，以根元素（通常是 html 元素）的字体大小为基准，使得页面元素的尺寸在...
vue中rem的配置的方法示例
10-18
在Vue.js中，为了实现移动端的自适应布局，通常会使用`rem`单位结合媒体查询进行设计。`rem`（root em）单位是以根元素（html元素）的字体大小为基准的长度单位，通过动态调整html元素的字体大小，我们可以轻松地...
详解基于vue-cli配置移动端自适应
08-28
本文主要介绍了基于vue-cli配置移动端自适应的方法，主要涉及到三个方面：lib-flexible库的安装和使用、px到rem的转换、vue-cli配置的修改。 首先，在项目中安装lib-flexible库，使用命令`npm i lib-flexible --...
前端HTMLrem单位的使用
个人笔记
03-03 247
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type=
html自适应rem布局,手机端页面自适应解决方案—rem布局进阶版（附源码示例）...
weixin_36376765的博客
06-20 430
一年前笔者写了一篇 《手机端页面自适应解决方案—rem布局》，意外受到很多朋友的关注和喜欢。但随着时间的推移，该方案已然过时，故为大家介绍一个目前我极力推荐使用的，更加完美的方案——rem布局(进阶版)另外：此方案仅适用于移动端web文章底部常见问题说明第四条，笔者已给出一个相当便捷的解决方案，欢迎留言交流。(2017/9/9)该方案使用相当简单，把下面这段已压缩过的 原生JS(仅1kb，源码已在...
html自动适应页面的单位,rem 单位实现页面自适应布局
weixin_36387104的博客
06-02 558
A. 先看一个函数：/** 设置根元素字体大小* @param Number minSW 最小缩放的设备屏幕宽度* @param Number maxSW 最大缩放的设备屏幕宽度* @param Number minFS 最小的宽度对应的字体大小* @param Number maxFS 最大宽度对应的字体大小* @return undefined*/function setRootFS(minS...
rem单位的使用
lw_yl
09-26 5009
1.对rem单位的简单认识： rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。而根节点就是节点。 2.对rem单位的简单换算： 我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系： 12px/16px=0.75rem 14px/16px=0.875rem 16px/16px=1r...
HTML Rem自适应方案
热门推荐
love and share
12-16 1万+
1. 设置标签头 <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 2. 设置body html 全屏 <style> html,...
移动端设置html的font-size从而设置rem的大小
yooungc的博客
12-15 3510
(function(){ var colCount = 20; // 设置列宽 var colWidth = document.documentElement.clientWidth / colCount;//;document.documentElement; // 确定基本的font-size
单页面引进rem
Infinityfeng的博客
12-08 403
单页面实现rem比vue引进rem复杂一点点 1，先创建文件自己写的js (function(){ var calc = function(){ var rem = document.documentElement.clientWidth/10; document.documentElement.style.fontSize = rem + 'px'; rem = document.documentElement.clientWidth > 750?37.5:rem; console
响应式页面及rem单位
pro1822的博客
04-06 169
响应式页面及rem单位
web如何使用rem单位
大大大大大碗面
05-10 3131
首先：用rem就是根据html的font-size，用em就是根据body的font-sizebootstrap样式表，html {font-size:62.5%;}  body {font-size:14px;}一、那么如果你确定要使用rem单位，就按以下三个步骤来计算：1、确定基数：一般10px，自己记住就行，不用写进代码里2、html {font-size:百分数;}    百分数=基数/1...
html中使用postcss-pxtorem自适应屏幕
06-01
在 HTML 中使用 postcss-pxtorem 实现自适应屏幕的步骤如下： 1. 安装 postcss-pxtorem 插件： 可以使用 npm 安装：`npm install postcss-pxtorem --save-dev` 2. 在项目中创建 postcss.config.js 文件： 在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值