移动端适配方案中，可以使用vw作为页面中各元素的单位，以此来完成适配效果。下面我们来讲怎样在vue-cli 项目中使用 postcss-px-to-viewport插件。前言先来认识一下postcss，postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具。postcss的作用：兼容各个内核的浏览器，增强代码的可读性。autoprefixer 插件可以自动获取浏览器的流行
逻辑运算// 算术运算符±*/会在计算之前考虑单位并转换
@base:5%;
@couversion-1:5cm+10mm;属性规则集可以自己定义一个CSS属性集@detached-ruleset:{
background:red;
width: 100px;
height: 200px;
};
.top_list_goup{
@detached-ruleset();
//调用时必
vw视口宽度，由于本事就是跟随屏幕变化的，所以更具有灵活性，不用js获取窗口来动态设置窗口宽度，现在用的比较少，公司目前不让用，先记录，也许以后用得到。//配合less不用自己换算，设计稿750px//定义变量vw=7.5vw//假设元素400px宽度，换算成vw即为400/@vw@vw:7.5vw;.container{padding:51/@vw43/@vw23/@vw45/@vw;.fist
原创
2019-06-03 14:42:49
4286阅读
点赞
Relation with Conversion1. WCHAR / TCHAR:WideCharToMultiByte()
wcstombs()
CString()
ATL macros: OLE2A(),W2T(),W2CT(),lstrcpy()
NOTE: #include <atlconv.h>
swprintf(wchar,L"%LS",char);
1.px 浏览器项目一种相对单位，是相对于想时期屏幕分辨率而言2.em是css单位，他是根据父元素来设定大小3.rem是css3的相对单位，相对于html根元素的字体大小来计算，可以设置大小，默认为16px3.1 字体大小可以柑橘媒体查询进行适配@media only screen and (max-width: 1600px) and (min-width: 1280px){
html{
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
原创
2022-07-22 14:33:15
58阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
原创
2023-03-24 19:17:04
24阅读
vw是由视口的宽度计算的 不同的设备完美视口的大小是不一样的 iPhone6 375 iPhone6plus 414 由于不同设备视口和像素比不同，所以同样的375像素在不同的设备下意义是不一样的. 比如在iPhone6中 375就是全屏，而到了 plus 中375就会缺一块 所以在移动端开发时，就
原创
2022-06-16 17:47:55
406阅读
什么是rem单位？rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（html元素）的font-size。默认情况下，html元素的font-size为16px， rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变fon
在讨论“iOS vw rem 和安卓 vw rem”时，首先我们要明确这两个概念是什么。vw（视口宽度，viewport width）和 rem（根元素字体大小基数）是用于响应式设计的单位。这在不同的操作系统上可能会有一些差异，首先来看看这些背景信息，以及它们各自的适用场景。
### 背景定位
响应式设计的提出是为了适应多种不同尺寸的设备，尤其是移动设备。iOS 和安卓在处理 vw 和 rem
网页中字体大小最小是12px，不能设置一个比12像素还小的字体 如果我们设置了一个小于12px的字体，则字体自动设置为12 0.13333333vw = 1px 5.33333vw = 40px
原创
2022-06-16 17:47:43
157阅读
rem是什么 rem（font size of the root element）是指相对于根元素的字体大小的单位。 1rem等于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位时，设置成相应的百分比即可。 为什么需要rem px：是相对于显示器屏幕分辨率而言的相对长度单位。在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得
vw/vh rem px 三者的转换（快速入门移动端页面编写）1：三种单位的转换2：如何适配移动端的不同设备前提知识：
手机端的长宽是实际设计过程中的两倍比如手机端是 750 * 1200那么具体实现的时候应该是 375px * 600px好，记住这个结论，当有一张设计图摆在你面前的时候，你只需要将它长宽除以二，就没问题了。这样说不知道有没有讲明白，没有的话请留言。三种单位的转换vw / v
转载
2024-05-21 14:58:50
82阅读
...
转载
2021-08-20 17:00:00
191阅读
2评论
1、页面布局：由于手机型号多样导致页面高宽比非常多，在制作上会有出现不同手机在同一套css下面显示效果不尽如人意，所以需要进行兼容性处理。方式很多比如直接套用类似bootstrap类的框架，可以使用rem等相对单位。这里我主要使用的是媒体查询和vw和vh单位和百分比来进行处理。100vw为整个屏幕的宽度，100vh为屏幕高度，其实和百分比的做法很相似，只不过把计算的值单位换成vw或者vh。2、碰到
转载
2024-07-04 16:13:39
79阅读
em，rem，vw和他的兄弟，% 弹性布局
移动端弹性布局中，字号单位、以及包裹文字的元素宽高单位，到底是用em，rem还是vw？先说vw和他的兄弟，vh，vmin，vmax。1vw ＝ 1/100th viewport width相对于视口的宽度。视口被均分为100单位的vw。简单来说，如果可视区宽度为300px，高度为200px，那么1vw = 3p
转载
2024-04-16 07:05:59
184阅读
缘起经过近十年的发展，Android技术优化日新月异，如今Android 10.0 已经发布，Android系统性能也已经非常流畅，可以在体验上完全媲美iOS。到了各大厂商手里，改源码、自定义系统，使得Android原生系统变得鱼龙混杂，然后到了不同层次的开发工程师手里，因为技术水平的参差不齐，即使很多手机在跑分软件性能非常高，打开应用依然存在卡顿现象。APP进行性能优化已成为开发者该有的一种综合
# 在iOS中解决vw不生效的问题
作为一名刚入行的小白，了解CSS的vw（viewport width）单位在iOS中的行为是很重要的。vw是在相对长度单位中使用的，它表示相对于视口宽度的百分比。然而，在某些情况下，vw可能会出现不生效的情况，特别是在使用某些响应式布局时。本文将详细介绍解决这一问题的流程，并通过代码示例帮助你更好地理解。
## 问题解决流程
下面是一个简单的流程表，以帮助
vw : 1vw 等于视⼝宽度的1% vh : 1vh 等于视⼝⾼度的1% vmin : 选取 vw 和 vh 中最⼩的那个 vmax : 选取 vw 和 vh 中最⼤的那个 视⼝单位区别于%单位，视⼝单位是依赖于视⼝的尺⼨，根据视⼝尺⼨的百分⽐来定义的；⽽%单位则是依赖于元素的祖先元素。 <!DO
转载
2020-10-07 20:52:00
69阅读
2评论
文章目录一、rem 基础二、 媒体查询三、 Less 基础四、rem 适配方案 一、rem 基础rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元 素大小。/* 根html 为 12px */
html {
font-
