我的博客原文地址：原文地址 如果文章对您有帮助，您的star是对我最好的鼓励～ 简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和 ...
分类：
其他好文 时间：
2020-04-27 09:56:49
阅读次数：
73
一、vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width)。1vw = 1% * 视口宽度。也就是说，一个视口就是100vw。 2.px:px应该是在css中使用最为普遍的单位了吧。px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在 ...
分类：
移动开发 时间：
2020-04-24 20:04:06
阅读次数：
90
rem和vw布局主要都是为了更好地适配移动端，毕竟手机的型号太多了。 在进行移动端设计的时候，首先要引入一个meta标签。（禁止用户缩放） 1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-sc ...
分类：
移动开发 时间：
2020-04-19 00:37:13
阅读次数：
124
SQLSERVER if exists(select * from sysobjects where id=OBJECT_ID(N'VW_SZYD_YTCT') and objectproperty(id,N'IsView')=1) drop view VW_SZYD_YTCT --删除视图go c ...
分类：
数据库 时间：
2020-04-10 15:58:27
阅读次数：
90
基于 vue cli3 创建一个移动端项目 安装 postcss 相关插件 由于 vue cli 已经内置了 postcss，只需要安装相关插件，就可以实现 自适应布局。 下面简单的说一下这几个插件的作用。 用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插 ...
分类：
移动开发 时间：
2020-04-06 11:35:30
阅读次数：
131
响应式布局中宽度与高度相同 纯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
个人的面试踩坑之旅，充满诚意的干货~ 一：今日头条 1.用css实现一个自适应的正方形详细参考：https://idiotwu.me/css-respon... <div class="placeholder"></div> 方法1：CSS3 vw 单位 .placeholder { width: ...
分类：
其他好文 时间：
2020-03-16 15:10:48
阅读次数：
92
在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面： 那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢？ 方案一：CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vm ...
分类：
Web程序 时间：
2020-03-15 09:20:57
阅读次数：
80
Rem布局？什么东西？？？Rem布局又称等比缩放布局，是移动端布局中常用的一种布局方式。Rem布局可以通过两种方式实现，一种通过JavaScript实现；还有一种通过vw实现。在这里小编主要讲述第二种方式。 下面小编先简单的说一下rem布局的优缺点： 优点：在不同的设备下看起来比较协调，内容会随着设 ...
分类：
其他好文 时间：
2020-03-08 19:29:10
阅读次数：
56
