对于vw布局的简单介绍、自动添加浏览器前缀、手淘布局方案、三种像素

最新推荐文章于 2024-04-24 14:46:15 发布
最新推荐文章于 2024-04-24 14:46:15 发布
阅读量212 收藏
点赞数
文章标签： android ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyanqin2545/article/details/110286289
版权

vw布局

vw单位

viewport’width 的简写

相对于视口宽度的的相对单位

100vw = 视口宽度

1.直接使用vw单位布局

  • 以设计稿为基准，使用px进行布局

  • 将px转换为vw单位

    • 100vw = 视口宽度 = 设计稿的宽度 750 1vw = 7.5px

    • px to vw

      • 在设置中，定好视口宽度

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Spn0CKFG-1606552592937)(…/AppData/Roaming/Typora/typora-user-images/image-20201124092137031.png)]

插件使用：

  • ​ ctrl+a全选 ——》命令面板（ctrl+shift+p） —》px to vw

2.rem+vw单位布局

  • 以设计稿为基准值，预设1rem = 100px,
  • 将设计稿中的px值转换为rem进行布局（200px * 200px–>2rem * 2rem）
  • 换算 html{font-size: 13.33333vw}
    • 1rem = 100px
    • 100vw = 视口宽度 = 750px ==> 1vw = 7.5px
    • 100px = ? vw
      • 1rem = 100px = 13.33333vw

自动添加浏览器前缀

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

根据配置Autoprefixer计算哪些前缀是需要的，哪些是已经过期的，添加也可清除过期的前缀;

配置参例

"autoprefixer.browsers": [
    "last 3 versions",
    "ie >= 10",
    "ie_mob >= 10",
    "ff >= 30",
    "chrome >= 34",
    "safari >= 6",
    "ios >= 6",
    "android >= 4.4"
  ]

浏览器列表browserslist

手淘布局方案（了解）

lib-flexible是什么？

阿里手机淘宝团队-H5适配的开源库

使用步骤

  • 添加对应的flexible_css.js,flexible.js文件：

    <script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>

  • 把视觉稿中的px转换成rem

    • 目前Flexible会将视觉稿分成100份，而每一份被称为一个单位a。

    • 同时1rem单位被认定为10a。

      针对我们这份视觉稿可以计算出：

      100a = 750

1a = 7.5px

1rem = 10a = 75px

    转换过程： 750*750px =  10rem* 10rem

实质(做了什么)

  • 动态改写<meta name="viewport">标签
  • 给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
  • 给<html>元素添加font-size属性，并且动态改写font-size的值

三种像素（掌握）

设备像素 - 物理像素（真实像素）

它是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。

它表示【显示设备的真实像素】，此像素【是设备的固有属性】，也就是说，【从出厂的那一刻，设备像素已经固定，不会再发生改变】

设备独立像素（逻辑像素、虚拟像素）

设备独立像素，可以认为是计算机坐标系统中的一个点，这个点【代表一个可以由程序使用的虚拟像素】（比如说css像素），然后【由相关系统转换为物理像素】

CSS像素

CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。
一般情况之下，CSS像素称为与设备无关的像素

设备像素比（device pixel ratio）——dpr

它定义了物理像素和设备独立像素的对应关系。

设备像素比 ＝ 物理像素 / 设备独立像素（css像素）
     

dpr=1 代表了1个设备独立像素  对应 1个物理像素
dpr=2 代表1个设备独立像素    对应 4个物理像素

Retina屏（视网膜显示屏）

在不同屏幕上，css所呈现的物理尺寸一致的，不同的是1个css像素所对应的物理像素数是不一致的，
在普通屏幕下1个css像素对应一个物理像素，而在retina屏幕下，1个css对应的是4个物理像素

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

一致的，不同的是1个css像素所对应的物理像素数是不一致的，
在普通屏幕下1个css像素对应一个物理像素，而在retina屏幕下，1个css对应的是4个物理像素

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

琴～～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 实现 rem 布局或vw 布局的方法
10-16
主要介绍了vue 实现 rem 布局的 或者 vw 布局的方法，本文给提供多种方法,需要的朋友可以参考下
html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！
weixin_29233857的博客
06-19 2149
一、前言根据前面写的 你不知道的css单位，进行了一种响应式布局的思考。视口布局的优点：宽度和高度全部自动适应！再加上rem布局的字体适应，可以完美解决各种屏幕适配问题！单位可参考 ： 你不知道的css单位该布局兼容性如下：iefirefoxchromesafarioperaios safariandroid browserandroid chrome9.0+2.0+4.0+3.1+3.5+3.2...
【新】移动端web （flex布局 rem / vw vh 布局）
chenlaining的博客
04-26 391
1.pc端和移动端网页的不同点 ①pc屏幕大，网页用版心 ②手机屏幕小，网页宽度多数为100% 2.分辨率（越高越好） 物理分辨率：生产屏幕时就固定的，不可被改变 逻辑分辨率（设备宽度）：由软件驱动所决定 （制作网页时考虑）375×667 3.视口（viewport）：浏览器显示页面内容的屏幕区域 无视口标签则宽度为980像素（默认） 使用mate标签设置视口宽度，制作适配不同设备宽度的网页（自动生成） 作用：设定html的宽度，使所制作的网页宽度与其设备相适应 pc端的视口尺寸不一致，根
移动端开发vw+rem布局，即等比缩放布局（什么是vw?如何设置根元素html的字体大小？如何换算vw单位？文末：移动端开发步骤详解链接）
小福气的博客
08-05 1236
1 什么是vw? vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。 1vw 视口宽度的1% 100vw 视口宽度的100% 1vh 视口高度的1% 100vh 视口高度的100% 2为什么要将根元素html字体大小设置为100px？ 是为了方便计算。 我们都知道，根元素默认的字体大小是12px,即 html{...
移动端布局rem与vw的区别
04-14 1553
如果你的页面只使用于微信、QQ，那绝对能放心使用vw单位
vw布局
weixin_64252848的博客
01-03 1103
vw布局: vw就是视口的宽度，vw 是个相对单位。 不管在什么屏幕下， 我们把屏幕分为平均的 100等份。 1vw = 1 / 100 屏幕的宽度 1vw 和 1% widith: 1vw; width: 1%; vw 和 1% 有没有区别： vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px px 如何转为vw 我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份， 则
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
09-22
主要介绍了CSS3移动端vw+rem不依赖JS实现响应式布局的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
仿京东移动端首页布局（固定尺寸、rem适配、vw适配）
08-23
仿京东移动端首页布局，包括固定尺寸布局、rem适配布局、vw适配布局，设计稿尺寸使用的iPhoneXR的414px * 896px。 我们可以通过在不同移动端设备上展示移动端网页，发现固定尺寸布局的不足之处，以及rem适配、vw适配...
从零开始在vue-cli4配置自适应vw布局的实现
10-15
主要介绍了从零开始在vue-cli4配置自适应vw布局，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VW布局。
m0_74899618的博客
02-22 123
<!-- vw布局--改变font-size的属性值，不需要js文件 --> <!-- vw viewport width 视口单位，将视口宽度平均分为100份 vh viewport height 视口单位，将视口高度平均分为100份 750px=100vw 1vw=7.5px 850px:分为100份 3vw=25.5px=3*8.5 ●优
如何利用vw+rem进行移动端布局
11-20
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹 简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。但这种方案有弊端（弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；
vw和vh布局
HXL521666的博客
11-20 2845
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 / vh属性布局了解及使用
m0_62181310的博客
04-28 4286
使用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.
移动端vw布局详解
热门推荐
zjw0742的博客
02-19 16万+
有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新...
前端 - browserslist 的 not dead 规则是什么
王文聪的博客
06-28 4505
你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。 All browser targets in the browserslist configuration have supported ES module.Therefore we don't build two separate bundles for differential loading..........
rem和vw布局
visibleforest的博客
09-11 1131
1.rem布局的原理 我们使用rem布局主要是为了实现容器的宽高可以等比例放大或缩小。我们用rem作为容器宽和高的单位，rem是相对单位，1rem=html字体的大小，所以我们只需要在屏幕发生变化时，修改html的字体大小就能实现等比缩放的效果。 那么当前视口宽所对应的html的字体应该是多大呢？ 当前视口html字体 =（设计图的视口宽/设计图html的字体大小） *当前视口宽 ...
了解vw布局
weixin_34138377的博客
06-06 318
vw是相对于不同屏幕大小的自适应的布局单位： 1vw相当于整个屏幕宽度的100分之1，如果给最外层div设置宽度为100vw，无论屏幕变大变小，1vw始终代表当前屏幕宽度的100/1； 因此vw在实际运用中： 对于宽度来说：设计图中当前元素宽度的px值 除以 设计图的宽度值，再乘以100后，加上vw单位即是当前元素的vw宽度； 对于高度来说：设计图中当前元素高度的px值 除以 设计图的宽度...
VW布局
狼道的博客
03-04 1643
1.https://www.w3cplus.com/mobile/vw-layout-in-vue.html（先参阅该网址） 2.postcssrc（VW布局时该文件的配置） // https://github.com/michael-ciniawsky/postcss-load-config module.exports = { "plugins": { // vue-cli...
react-native开发安卓端app
最新发布
m0_73872315的博客
04-24 592
总之，第一次app开发还是颇废了我一番功夫的，可以说红温了很多次，不过好在最终没有夭折。。。接下来要做点啥好像暂时还没有思路，正在思考我需要点啥中。。。。
在Vue中 使用sass配合 vw vh 做移动端自适应布局
06-07
可以使用`node-sass`和`sass-loader`来解析`.scss`文件，同时使用`postcss-loader`和`autoprefixer`来自动添加浏览器厂商前缀，最后使用`css-loader`和`style-loader`将CSS样式注入到HTML页面中。 在Vue项目中，可以在`vue.config.js`文件中进行配置： ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: ` @import "@/assets/scss/_variables.scss"; @import "@/assets/scss/_mixins.scss"; ` }, postcss: { plugins: [ require('autoprefixer')({ overrideBrowserslist: ['last 2 versions', '>1%'] }) ] } } } } ``` 然后，可以在`.vue`文件中使用`<style lang="scss">`标签来编写Sass样式，例如： ```scss // _variables.scss $base-font-size: 16px; $base-width: 750px; // _mixins.scss @function px2rem($px) { @return ($px / $base-font-size) * 1rem; } @mixin center() { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } // index.vue <style lang="scss"> .container { width: $base-width; margin: 0 auto; } .title { font-size: px2rem(32px); margin-top: px2rem(20px); } .box { width: 50vw; height: 50vh; background-color: #f00; @include center(); } </style> <template> <div class="container"> <h1 class="title">Hello World!</h1> <div class="box"></div> </div> </template> ``` 以上示例中，`$base-font-size`和`$base-width`变量定义在`_variables.scss`中，`px2rem()`和`center()`混合宏定义在`_mixins.scss`中，然后在`index.vue`中引入并使用它们来实现移动端自适应布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值