css+ vw&rem 自适应布局

最新推荐文章于 2022-03-29 20:38:26 发布
原创 最新推荐文章于 2022-03-29 20:38:26 发布 · 置顶 · 590 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了如何使用视口单位vw和REM实现响应式网页设计，确保不同设备上的字体大小自适应调整。通过计算公式100vw/7.5，实现了在不同屏幕尺寸下字体大小的等比缩放。

前提是布局视口等于视觉视口

对于750px
100vw = 750px
1px = 100vw/750
100px= 10000vw/750
=100vw/7.5
html:font-size->1rem->100vw/7.5=100px

在750尺寸下布局完成，在其他尺寸自适应

举例子
在375 比如 ipone6
按道理rem应该等于50px 就可以等比缩放
看看这个式子在375下是否是50px
100vw/7.5=375px/7.5=50px

最后是这个样子

html{
	          font-size: calc(100vw /7.5) ;
			}
【手淘自适应】rem+webpack实现移动端自适应布局的思路
waht的博客
08-21 1211
开始之前先粗略讲一下各种概念，如果要深入理解可以谷歌关键词到处逛逛。如果对这些概念了如指掌，那就可以直接拉到第二块二、实现自适应布局区域。 一、各类名词概念 1、各类像素 （1）物理像素(dp —— device pixels) 概念 说人话就是屏幕上每一颗最小发光点就是1个物理像素。ppi（每英寸像素量）是屏幕像素密度的单位，像素密度越大，屏幕显示细节就能更多，画质更加细腻，文本更加清晰。。...
完美的响应式布局vw+vh+rem屏幕适配方案！
热门推荐
happy任的博客
08-07 3万+
一、前言 根据前面写的  你不知道的CSS单位，进行了一种响应式布局的思考。   视口布局的优点：宽度和高度全部自动适应！再加上rem布局的字体适应，可以完美解决各种屏幕适配问题！ 单位可参考 ：  你不知道的CSS单位 该布局兼容性如下： IE Firefox Chrome Safari Opera iOS Safari Android Browse...
使用vw定制rem自适应布局
WebDestiny的博客
09-19 878
结合vw单位和calc()脱离移动端使用rem布局需要依赖JS设置不同屏幕宽高比的控制 但是要注意：rem页面布局不兼容低版本移动端系统 /* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw / 7.5); } ...
CSS3移动端vw+rem不依赖JS实现响应式布局
WER32432432的博客
01-23 347
1、前言 （1）vw/vh介绍 在使用之前，我们先简单了解一下什么是vw和rem以及它们的作用，vw是css3出现的一个新单位，它是“view width”缩写，定义为把当前屏幕分成一百份，1vw即为屏幕的1%，与之对应的是vh，把高分成一百份，1vh即为屏幕高的1%，一般我们常用的vw单位来完成响应式开发 （2）rem介绍 rem是相对长度单位。相对于根元素(即html元素)font...
css3单位em，rem，px，vw，vh等
weixin_33695450的博客
03-21 106
昨天发现了个好用的方法去设置手机端的rem单位，在这里记录下。 html{ 　　font-size:calc(100vw/7.5);} 这是按照750的设计稿（也就是iphone6的设计稿）。 100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于50px。 替换页面中的单位，把所有的px单位替换成rem，除以100，比如某字体大小在设计稿上是36px，就是0....
CSS布局技巧一【使用vw定制rem自适应布局、使用:nth-child()选择指定元素、使用writing-mode排版竖文、使用text-align-last对齐、使用:not()去除无用属性】
weixin_43837268的博客
09-08 590
使用vw定制rem自适应布局 要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制 场景：rem页面布局(不兼容低版本移动端系统) 兼容：vw、calc() /* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw / 7.5); } 使用:nth...
利用vw+rem实现移动web适配布局
weixin_34161064的博客
12-02 365
基本概念 1、单位 Px(CSS pixels) 像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的 其实是相对于某个设备而言的，不同设备指定的值大小还是有区别的 em 1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元...
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
09-22
在CSS3中，我们有多种工具可以实现这一目标，其中vw和rem单位是移动设备上实现响应式布局的有效手段，而无需依赖JavaScript。 1. **vw单位**： - `vw` 即 "view width" 的缩写，表示相对于视口宽度的单位。1vw等于...
如何利用vw+rem进行移动端布局
11-20
【vw+rem移动端布局】是一种优化移动端网页设计的布局策略，旨在解决不同设备屏幕尺寸下的适配问题。传统的rem布局方案依赖于JavaScript代码动态调整根元素`html`的`font-size`，以此来实现元素尺寸的按比例缩放。...
纯css3使用vw和vh实现自适应的方法
09-24
总结来说，纯CSS3利用vw和vh单位实现自适应布局是一种高效、简洁的方法，尤其适合于追求性能和简洁性的项目。通过理解视口单位的工作原理，开发者可以更好地控制网页元素在不同设备上的表现，提升用户体验。
VUE项目自适应设置使用vw + rem实现页面布局适配
qq_41623635的博客
11-23 1529
使用vw是为了让元素的大小能受到屏幕大小的变化而控制 让整体使用rem的单位,跟随html中font-size的设置 640设计图: 100vw = 满屏 = 320px 1vw = 3.2px ?vw = 100px 100/3.2 = 31.25vw 得出 31.25vw = 100px ......
移动端自适应：rem和vw
m0_62823653的博客
03-29 862
第一部分rem 一. rem的概念 1 rem等于页面HTML标签字号大小16px（谷歌） 二.媒体查询的概念 通过设置媒体查询在多大屏幕显示多大的字号大小：可以设置在此范围内HTML的字体大小。从而做到rem的自适应。 @media (width: 375px) { html { font-size: 20px; } } 三：使用flexible.js文件来实现适配 （clientWidth是对象可见的宽度） （1）flexible.js手淘框架的核心原理就是根据不同的对象可见宽
CSS3 calc rem [css的计算器]
qq_26239917的博客
03-12 1185
html{font-size: calc(100vw/7.5);} /* 每一个像素的vw 50px 就乘以这个1vw */ body{font-size: .24rem;} 1vw 是屏幕的百分之一 100vw/7.5 = 1rem[相对根元素html的度量单位] 后面的数据都除以了100，相当于除以了750，实际使用像素是750，也就是每一个像素是100vw/750,再将实际测得的像素*re...
rem 自适应、整体缩放
jyf_568的博客
09-05 150
html{ font-size: calc(100vw/7.5); } 说明： 100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于100px。 若是低版本的设备不支持rem，那么就需要js来处理一下： document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px' (function() { ...
rem布局实现不同分辨率移动终端的自适应、整体缩放
changjiufu的博客
09-02 892
前言 为了让我们用html5画出来的界面在各种移动端都可以自适应比例，我们采用页面尺寸样式采用rem布局，以适应各种移动终端的显示。 假如我们以苹果6宽度像素的尺寸作为标准——750，以750设计稿为例。 第一步：设置初始rem html{ font-size: calc(100vw/7.5); } ps: 100vw是设备的宽度，除以7.5可以让1rem的大小在iPhon...
移动端的适配
m0_52634705的博客
01-12 372
一、名词 屏幕尺寸：屏幕对角线的长度，单位是英寸（1英寸=2.54厘米） 屏幕分辨率：指横纵方向上的像素点数，单位为px 屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi 实际上像素分为两种：设备像素（物理像素）和逻辑像素（css像素） DPR：设备像素比DPR（devicePixelRatio）是默认缩放为100%的情况下，设备像素和css像素的比值 实际工作中我们得到的设计稿都是倍数图 二、单位 px是一个固定的值 em是根据其父元素的font-size计算 rem是根据
根据dpr设置html fontsize,如何为不同移动设备设置html不同的font-size？
weixin_39634508的博客
06-16 299
iPhone6的屏幕下1rem=50px或者用csshtml{font-size:calc(100vw / 7.5);}分割线抱歉，之前的那段js代码兼容性不是很好，包括那段css代码，只要在低版本的安卓手机上就会失效，找了很久找到一段代码分享一下，兼容性杠杠的(function(){var originWidthByDesign = 750 / 2;var originRootFontSize ...
移动端入门知识（2）
wx112728的博客
03-23 491
一、单位（续集） 我们大家都知道盒子的宽度可以设置为100%，并且会生效；如果我们高度设置为100%会生效吗？这个我们大家可以去尝试一下，答案是不能的。 想把盒子的高度设置为100%有两种方法： 1.就要用绝对定位和固定定位中的一个 position: fixed; /* position: absolute; */ width: 100%; height: 100%; 2.用vw和vh单位 width: 100vw; height: 100vh; 下面就让我来介绍一下vw和vh吧！
移动端REM布局自动等比缩放还原设计
superw的博客
11-18 683
同学们面对移动端不同分辨率的手机，肯定也为自适应的布局头大吧。 有了REM一切好像变的简单了，现在一般移动端的设计宽度都是750PX，或者640PX.今天我们就以750的设计稿为例讲下怎么还原设计吧。 在750px下 html{font-size: calc(100vw/7.5);} 100vw=750px–>font-size:750px/7.5 -->100px–>1rem。这里两个概念，一是VW就是手机屏幕宽度的单位，不管你手机屏幕实际宽是多少都可以用100VM来表示，类似于是一
CSS3实现自适应浏览器的响应式框架布局
CSS3 自适应浏览器页面框架布局代码是基于 CSS3 的最新技术标准，利用其提供的新的布局方式以及响应式设计特性来创建一个能够适应不同浏览器窗口大小的网站界面。随着Web技术的发展，响应式网页设计变得日益重要，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值