我的博客原文地址：原文地址 如果文章对您有帮助，您的star是对我最好的鼓励～ 简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和 ...
分类：
其他好文 时间：
2020-04-27 09:56:49
阅读次数：
73
基于 vue cli3 创建一个移动端项目 安装 postcss 相关插件 由于 vue cli 已经内置了 postcss，只需要安装相关插件，就可以实现 自适应布局。 下面简单的说一下这几个插件的作用。 用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插 ...
分类：
移动开发 时间：
2020-04-06 11:35:30
阅读次数：
131
px:像素 px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。 em ...
分类：
Web程序 时间：
2020-04-02 16:07:13
阅读次数：
80
文章目录万能居中BFC优化盒模型哪两种模式？什么区别？如何设置常用清除浮动的方法，如不清除浮动会怎样？删格化的原理纯css实现三角形高度不定，宽100%，内一p高不确定，如何实现垂直居中？至少两种方式实现自适应搜索设置一段文字的大小为6pxcss菊花图关于em关于vh,vwFlex布局overflow原理实现自适应的正方形:标准模式和怪异模式CSS3实现环形进度条css优先级万能居中1.margi
分类：
Web程序 时间：
2020-04-01 10:32:46
阅读次数：
102
响应式布局中宽度与高度相同 纯css方法设置ul中li宽高相等 关键词：VW / VH vw：视窗的宽度 vh：视窗的高度 思路：根据vw获取视图宽度从而设置li的宽度等于高度 代码： <li> <div class="test"> <img src="../images/hm1.png" alt= ...
分类：
Web程序 时间：
2020-03-31 22:46:39
阅读次数：
489
title: calc与vh、vw date: 2020 03 18 09:43:10 tags: css vh、vw 与`vw` 是一个 js 与 css耦合的单位，经常用来做响应式布局,这两个单位是 css3引入的 视口是指：浏览器可视区域 vw: 相对于视口的宽度。视口被均分为100单位的vw ...
分类：
其他好文 时间：
2020-03-18 13:13:34
阅读次数：
63
在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面： 那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢？ 方案一：CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vm ...
分类：
Web程序 时间：
2020-03-15 09:20:57
阅读次数：
80
目标：新建html快捷键 解说：当我们想在VSCode中新建html代码时，可以 输入vh 然后回车或者Tab即可自动生成一个html文件模板 步骤： 1.点击设置 用户代码片段 搜索html，出现html.json文件，点击即可； 2. { "h5 template": { "prefix": " ...
分类：
Web程序 时间：
2020-03-07 15:55:38
阅读次数：
82
viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最 ...
分类：
Web程序 时间：
2020-03-05 13:17:54
阅读次数：
84
今天因为react-native的style只能给width和height设置数字 没有react上的vw和vh 因为之前经常用vh vw 感觉不适应 找到了一个新的方法 使用Demension模块 1，引入Demension import { Demensions } from 'react-na ...
分类：
其他好文 时间：
2020-02-28 14:07:34
阅读次数：
457
