手机端布局rem 与vh vw的使用

最新推荐文章于 2022-06-22 16:38:48 发布
最新推荐文章于 2022-06-22 16:38:48 发布
阅读量99 收藏
点赞数
原文链接：http://www.cnblogs.com/FineDay/articles/5969747.html
版权

手机端原来的时候，在项目中使用js判断出html的字体，然后根据rem设置字体，但是js本着少用的原则，考虑用vw，vh等（顺带说一句，vw vh是网页可视区域宽度 高度 即浏览器宽度减去约16px）

以750px的收集设计稿，采用36px的基础单位 html{ font-size: calc(36 * (100vw) / 750);}rem就可以使用了

 

转载于:https://www.cnblogs.com/FineDay/articles/5969747.html

weixin_34259159
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手机端转换rem适应
08-30
本文将深入探讨如何在手机端利用`rem`进行页面布局的适配，并通过提供的代码实例来说明。 1. **理解rem单位** `rem`代表“root em”，与`em`单位类似，但不同之处在于`em`是相对于父元素的字体大小，而`rem`始终是...
vw / vh属性布局了解及使用
m0_62181310的博客
04-28 4588
使用vw布局方案，实现视口宽度不同，网页元素宽高等比缩放效果 目录 一、vw和vh基本使用 二、vw和vh布局流程 三、vh布局弊端 一、vw和vh基本使用 vw和vh为相对单位，相对视口尺寸计算结果 1vw = 1/100视口宽度 1vh = 1/100视口高度 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m.
布局：px to vw、vh
snowball的博客
12-08 925
一、背景： vue项目，移动端实现自适应布局 二、选用方案： 视口单位（viewport units）： 三、理解视口单位： 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，.
vw和vh布局
HXL521666的博客
11-20 2878
vw/vh是什么？ vw/vh 是一个相对单位（类似 em 和 rem 相对单位） vw 是：viewport width 视口宽度单位 vh 是：viewport height 视口高度单位 相对视口的尺寸计算结果 1vw = 1/100 视口宽度 1vh = 1/100 视口高度 例如： 当前屏幕视口是 375px，则 1vw 就是 3.75px，如果当前屏幕视口为 414px，则 1vw 就是 4.14px。 注意：和百分比有区别，百分比是相对于父元素来说的，而 vw 和.
移动端开发vw+rem布局，即等比缩放布局（什么是vw?如何设置根元素html的字体大小？如何换算vw单位？文末：移动端开发步骤详解链接）
小福气的博客
08-05 1278
1 什么是vw? vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。 1vw 视口宽度的1% 100vw 视口宽度的100% 1vh 视口高度的1% 100vh 视口高度的100% 2为什么要将根元素html字体大小设置为100px？ 是为了方便计算。 我们都知道，根元素默认的字体大小是12px,即 html{...
前端中网页布局px ,rem,em,vw,vh的认识和区别有哪些？
ccssr的博客
06-22 4994
网页开发中，常会涉及到各种相对单位，px,rem,em,vw,vh你是否全面了解会使用，并且可以轻易区分它们，如果你特别头疼不知道它们是什么怎么用，欢迎点击阅读收藏哦
仿京东移动端首页布局（固定尺寸、rem适配、vw适配）
最新发布
08-23
仿京东移动端首页布局，包括固定尺寸布局、rem适配布局、vw适配布局，设计稿尺寸使用的iPhoneXR的414px * 896px。 我们可以通过在不同移动端设备上展示移动端网页，发现固定尺寸布局的不足之处，以及rem适配、vw适配...
vue 实现 rem 布局或vw 布局的方法
10-16
在移动设备开发中，适配不同的屏幕尺寸是一个重要的任务，其中`rem`和`vw`单位经常被用来...为了更好的兼容性和性能，可以考虑结合`flexible`库和转换插件来简化`rem`布局的实现，同时在某些特定场景下使用`vw`单位。
手机端用rem+scss做适配的详解
09-27
主要介绍了手机端用rem+scss做适配的详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
scss自适应_CSS3使用vw实现自适应
weixin_29806483的博客
12-31 882
方式11.对于设计稿的尺寸转换为vw单位，我们使用Sass函数编译//iPhone 6尺寸作为设计稿基准$vm_base: 375;@function vw($px) {@return ($px / $vm_base) * 100vw;}2.无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位.mod_nav {background-color: #fff;&_list {dis...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
weixin_33968104的博客
06-20 1807
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像...
css3新单位vw、vh的使用详解
weixin_34192816的博客
03-23 533
响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。 比如： (function (doc, win) { let docEl = doc.documentElement let resizeEvt = 'orientationchange' in window ? 'orientationc...
前端学习之vw,vh适配
qq_45839045的博客
01-07 1616
em em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 比如父元素font-size:12px; 自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）; 但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）； rem rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN 比如根元素（html）设置fon
css3自适应布局单位vw,vh详解
wilL-my的博客
04-08 575
视口单位(Viewport units) 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“...
完美的响应式布局vw+vh+rem屏幕适配方案！
weixin_41796631的博客
05-06 2991
https://blog.csdn.net/qq_24182885/article/details/81479457
移动端开发中，如何使字体自适应？
记录和分享属于我的“IT”时光
05-12 1883
移动端开发中，为适应不同屏幕尺寸，需要字体根据屏幕大小改变而改变。下列两种方法任选其一即可。 （方法一）CSS3解决 css3提供了一些与当前viewpoint（window size）相关的元素，vw（宽度单位），vh（高度单位）等。 html{ font-size: calc(100vw/36); font-size: -webkit-calc(100vw/36); font-size: -moz-calc(100vm/36); } 原理：让不同尺寸的屏幕有一个统一的单位来衡量
纯CSS3使用vw和vh视口单位实现自适应
lucky__peng的博客
02-20 1019
编者注：在移动端中利用REM的相对于根HTML进行改变，通过一段JS实现了移动端自适应，本文则使用纯CSS视口单位来自行自适应，虽然现在的兼容性还没法完全能够接受，但不妨碍你认识这个vw和vh的强大。 响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。 即使是通过 rem 单位来实现适配，也是需要内嵌一段脚本去动态计算根元素大小。 近年来，随着移动端对视口单位的支持越来
css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
热门推荐
飘过的春风
10-13 5万+
“无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。” 我们想要实现页面自适应布局时，通常因为margin的存在，而比较麻烦；有时候想要实现宽度自适应的输入框时，也因为padding或margin的存在，而相当繁琐，同时由于浏览器兼容性而导致最终效果不一致。css3新添加属...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值