css+ vw&rem 自适应布局

最新推荐文章于 2023-04-04 16:20:28 发布
置顶 最新推荐文章于 2023-04-04 16:20:28 发布
阅读量500 收藏
点赞数
分类专栏： CSS进阶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26239917/article/details/101068556
版权

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

对于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) ;
			}
Fade Away
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何利用vw+rem进行移动端布局
11-20
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹 简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。但这种方案有弊端（弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
09-22
在CSS3中，我们有多种工具可以实现这一目标，其中vw和rem单位是移动设备上实现响应式布局的有效手段，而无需依赖JavaScript。 1. **vw单位**： - `vw` 即 "view width" 的缩写，表示相对于视口宽度的单位。1vw等于...
CSS3移动端vw+rem不依赖JS实现响应式布局
WER32432432的博客
01-23 271
1、前言 （1）vw/vh介绍 在使用之前，我们先简单了解一下什么是vw和rem以及它们的作用，vw是css3出现的一个新单位，它是“view width”缩写，定义为把当前屏幕分成一百份，1vw即为屏幕的1%，与之对应的是vh，把高分成一百份，1vh即为屏幕高的1%，一般我们常用的vw单位来完成响应式开发 （2）rem介绍 rem是相对长度单位。相对于根元素(即html元素)font...
使用vw定制rem自适应布局
WebDestiny的博客
09-19 790
结合vw单位和calc()脱离移动端使用rem布局需要依赖JS设置不同屏幕宽高比的控制 但是要注意：rem页面布局不兼容低版本移动端系统 /* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw / 7.5); } ...
CSS布局技巧一【使用vw定制rem自适应布局、使用:nth-child()选择指定元素、使用writing-mode排版竖文、使用text-align-last对齐、使用:not()去除无用属性】
weixin_43837268的博客
09-08 516
使用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 281
基本概念 1、单位 Px(CSS pixels) 像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的 其实是相对于某个设备而言的，不同设备指定的值大小还是有区别的 em 1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元...
VUE项目自适应设置使用vw + rem实现页面布局适配
qq_41623635的博客
11-23 1367
使用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 731
第一部分rem 一. rem的概念 1 rem等于页面HTML标签字号大小16px（谷歌） 二.媒体查询的概念 通过设置媒体查询在多大屏幕显示多大的字号大小：可以设置在此范围内HTML的字体大小。从而做到rem的自适应。 @media (width: 375px) { html { font-size: 20px; } } 三：使用flexible.js文件来实现适配 （clientWidth是对象可见的宽度） （1）flexible.js手淘框架的核心原理就是根据不同的对象可见宽
纯css3使用vw和vh实现自适应的方法
09-24
总结来说，纯CSS3利用vw和vh单位实现自适应布局是一种高效、简洁的方法，尤其适合于追求性能和简洁性的项目。通过理解视口单位的工作原理，开发者可以更好地控制网页元素在不同设备上的表现，提升用户体验。
详解rem 适配布局
09-22
**rem适配布局详解** 随着手机型号的多样化，前端开发者面临着如何实现跨设备自适应布局的挑战。在这样的背景下，`rem`单位应运而生，成为解决这一问题的关键技术。`rem`（root em）是一种相对单位，它基于根元素...
vue 实现 rem 布局或vw 布局的方法
12-13
一、实现 rem 布局 移动端 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 方法一、在 index.html 或者 main.js 中添加以下代码： const setHtmlFontSize = ...
前端知识——css 之移动端适配方案vw、rem详解
weixin_42771853的博客
04-04 5982
px是pixel单词的缩写，翻译为像素。像素是影响显示的基本单位。像素单位常见的有三种像素名称：设备像素（也称之为物理像素）；设备独立像素（也称之为逻辑像素）；CSS像素设备像素，也叫物理像素。设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小比如iPhone X的分辨率 1125x2436，指的就是设备像素设备独立像素，也叫逻辑像素。
css移动端rem自适应布局根代码 强!强!强!
一只小白奔向大牛的故事
07-11 781
只需一行代码css函数:calchtml{    font-size: calc(100vw/7.5);}
vw px rem之间换算
weixin_45000975的博客
03-24 9518
一、vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width)。1vw = 1% * 视口宽度。也就是说，一个视口就是100vw。 2.px:px应该是在css中使用最为普遍的单位了吧。px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，随着Retina屏的流行，分辨...
calc计算，移动端布局
weixin_30471561的博客
09-09 288
在做移动端页面布局的时候，需要做到响应式，也就是文字会随着页面的大小改变以后文字的大小和div的宽高等比例跟着改变。 rem 单位 是相对于html的font-size的来的，所以用rem单位就可以实现。 我们只要把HTML的font-size设置自适应，其他的单位用ren以后自然就能实现。 vw 单位 是视口的单位 <meta name="viewport" content="initia...
vw/vh和100%的区别
lovezhuer1的博客
07-06 5960
在实现自适应布局时往往会用到vh/vw和100%，那么vh/vw和100%的区别是什么呢？要了解他们之间的区别，首先要了解vh、vw。 vh/vw 视口（viewport） 在桌面端，指的是浏览器的可视区域；在移动端，指的是Viewport中的Layout Viewport。浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 在css3规范中，1 vw 等于视口宽度的1%，1 vh 等于视口高度的1%。
移动端适配问题，选vw还是rem？还是其他方式？
sak1sm的笔记
10-19 3173
最近在学习前端页面的适配问题，问了身边几个前端岗位工作的的朋友移动端的适配方式，结果每个人都给出了不一样的适配方式，前段时间正火热的rem适配方式，现在已经慢慢vw赶上了，感叹前端技术变化真是快。 接下来总结一下最近的学习： 移动端适配是选vw还是rem？其实并不是所有场景下的移动端页面都适合的，采用vw或rem的方案的本质是布局等比例的缩放，这类方案可以保证页面各元素之间位置尺寸的比例关系，并...
CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
macleer的博客
07-22 5115
很简单，只要一行代码就搞定了： .wrap-outer { margin-left: calc(100vw - 100%); } 或者： .wrap-outer { padding-left: calc(100vw - 100%); } 然后就可以庆祝放鞭炮啦！！ 首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实
【CSS笔记】— 使用calc()计算宽高（vw/vh）
weixin_34148508的博客
12-18 1161
【CSS笔记】— 使用calc()计算宽高（vw/vh） calc()是什么？ 简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算， 使用“+”、“-”、“*” 和 “/”四则运算； 可以使...
css+html 自适应
最新发布
09-10
5. 使用视口单位（Viewport Units）：视口单位是CSS3中引入的一种相对单位，如vw、vh、vmin、vmax，它们可以根据浏览器窗口的尺寸来设置元素的大小，从而实现自适应布局。 通过综合运用以上方法，可以实现CSS和HTML...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值