51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
信创认证
公众号矩阵
移动端
视频课
免费课
排行榜
短视频
直播课
软考学堂
全部课程
软考
信创认证
华为认证
厂商认证
IT技术
PMP项目管理
免费题库
在线学习
文章
资源
问答
课堂
专栏
直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
51CTO博客
首页
关注
排行榜
精品课程
免费资料
软考题库
科目全、试题精、讲解专业，扫码免费刷
搜索历史
清空
热门搜索
查看【
】的结果
写文章
创作中心
登录
注册
css的vw布局
51CTO博客
>
热门标签
>
css的vw布局
全部内容
精选文章
免费资料
代码库
标签简介
时间
热度
默认
CKA（Kubernetes 管理员认证）精品班
按照企业k8s需求进行技能培训，帮助用户快速拿下CKA认证，K8S采用新版本进行授课，课程内容全、讲解详细 。
免费试学
软考高级：系统架构设计师精品班
根据考试大纲对知识点、高频考点进行深入讲解，传授答题技巧及判断标准，助力高效备考。
免费试学
信创认证：系统架构师精品班（高级）
信息技术应用创新人才考试评价
免费试学
css
3自适应
布局
单位
vw
,vh
css
3自适应
布局
单位
vw
,vh一、总结一句话总结：
vw
和vh都是视图单位，分别为视图宽高
的
1% 1、vh/
vw
与%区别？%是相对于父元素，vh和
vw
是相对于视图高宽% 百分比，相对长度单位，相对于父元素
的
百分比值vh和
vw
相对于视口
的
高度和宽度 二、
css
3自适应
布局
单位
vw
,vh你知道多少？视口单位(Viewport units)什么是视口？ 在PC端，视口指的是在PC端，指的是浏览器
的
可
css
css3
微信
html
自适应布局
转载
mob604756e5abbc
2019-12-05 15:35:00
349
阅读
2
评论
css
响应式
布局
rem和
vw
哪个好
响应式
布局
，流体
布局
，自适应
布局
，静态
布局
等等，这是移动设备
的
飞速发展，前端人员不得不跟上潮流
的
一个方向。实际上各种设备尺寸，分辨率大都不同，真的适应各种设备依旧是不现实
的
，首先是浏览器差异化，让我们去hack，现在是终端问题，让我展现出不同
的
设备不同
的
样式，折腾来折腾去，终于我们走进了热火朝天
的
响应式
布局
，自适应只能算是响应式
布局
的
一个子集吧，对于流体个栅格后面会再次提到，有兴趣可以关注。首先讲
css响应式布局rem和vw哪个好
响应式布局
手机网站
css样式
转载
新新人类
4月前
33
阅读
css
新单位
vw
, vh
考虑到未来响应式设计
的
开发，如果你需要，浏览器
的
高度也可以基于百分比值调整。但使用基于百分比值并不总是相对于浏览器窗口
的
大小定义
的
最佳方式，比如字体大小不会随着你窗口改变而改变，如今
css
3引入
的
新单位明确解决这一问题。 View Demo
css
3引入
的
”
vw
”和”vh”基于宽度/高度相对于窗口大
css新单位
css3
响应式设计
css样式
窗口大小
转载
mob60475704ea1a
2017-04-29 21:39:00
391
阅读
2
评论
[
CSS
3] Responsive Text with
vw
unit
Just like the title h1 { font-size: 5
vw
; } Make font responsive to view width
CSS
转载
mob604756fd5175
2020-07-23 19:06:00
136
阅读
2
评论
vw
+vh+rem响应式
布局
科普下： 平时很少用
的
css
单位: 1.长度单位： re
html
宽高
缩放
原创
鱼樱前端
2022-09-09 07:57:15
165
阅读
Css
单位px，rem，em，
vw
，vh
的
区别
px px就是pixel像素
的
缩写，相对长度单位，网页设计常用
的
基本单位。像素px是相对于显示器屏幕分辨率而言
的
em em是相对长度单位。相对于当前对象内文本
的
字体尺寸（参考物是父元素
的
font-size） 如当前父元素
的
字体尺寸未设置，则相对于浏览器
的
默认字体尺寸 特点： 1. em
的
值并不是固 ...
html
当前对象
css3
屏幕分辨率
网页设计
转载
mob604756f6b718
2021-07-12 15:37:00
662
阅读
2
评论
移动端
布局
2：
vw
结合rem实现移动端
布局
上一回说到了媒体查询结合rem做移动端
布局
，步骤如下 首先设置媒体查询，确定html中font-size值
的
变化 @media all and (max-width:320px){ html{font-size:12px;} } @media all and (min-width:321px) an
html
媒体查询
css
重置
屏幕宽度
转载
mb5fdb0a4002420
2020-05-14 10:23:00
202
阅读
2
评论
css
html 移动端适配 font-size: 13.33
vw
rem +
vw
如果你了解设计稿你就懂了，其实很简单：首先要先说明：移动端
的
设计稿一般是width：750px，height：auto（这里指
的
是不确定），100
vw
= 100%，这个也没有问题吧；那么，设计稿拿过来，我们可以得出：750px = 100
vw
，这个也没有问题吧，那么1px等于多少
vw
呢？ 是不是 ...
html
移动端
it技术
转载
mob604756f920a7
2021-10-27 21:26:00
968
阅读
2
评论
css
rem
布局
css
布局
方案
1、左右
布局
这就要说到一个属性float，使用float: left;就可以让浮动元素 会脱离正常
的
文档
布局
流，并吸附到其父容器
的
左边。在正常
布局
中位于该浮动元素之下
的
内容，此时会围绕着浮动元素，填满其右侧
的
空间。但是，子类使用float来使元素并排，那么父类就需要使用clearfix来防止子元素下方
的
标签浮动上来贴和。.clearfix::after { content: '';
css rem 布局
背景图片
块级元素
css
转载
mob64ca13f96cda
2024-04-26 09:27:15
85
阅读
css
Table
布局
：基于display:table
的
CSS
布局
两种类型
的
表格
布局
你有两种方式使用表格
布局
-HTML Table（<table>标签）和
CSS
Table（display:table 等相关属性）。 HTML Table是指使用原生
的
<table>标签，而
CSS
Table是指用
CSS
属性模仿HTML 表格
的
模型。 在W3C关于<table>
css
html
html标签
栅格
类名
转载
mb5fd8698f60f87
2017-10-16 18:59:00
316
阅读
2
评论
css
布局
容器撑满高度
css
中
的
布局
多栏
布局
有三种基本
的
实现方案： 固定宽度，流动，弹性固定宽度
布局
的
大小不会随用户调整浏览器窗口大小而变化，一般是900到1100像素宽。其中960像素是最常见
的
，因为这个宽度适合所有现代显示器，而且能够被16、12、10、8、6、5、4和3整除，不仅容易计算等宽分栏
的
数量，而且计算结果也能得到没有小数
的
像素数。流动
布局
的
大小会随用户调整浏览器窗口大小而变化。这种
布局
能够更好地适应大屏幕，但同时也意
css布局容器撑满高度
ide
内边距
固定宽度
转载
墨色天香
2024-05-29 07:26:34
213
阅读
VW
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
html
scala
原创
我真不想敲代码
2023-03-24 19:17:04
24
阅读
css
px em rem %
vw
vh vm 区别
前言 在传统项目开发中，我们只会用到 px、%、em 这几个单位长度，它们可以适用大部分项目的开发，并且拥有较好
的
兼容性。 而从
css
3 开始，浏览器对逻辑单位
的
支持又提升了新
的
境界，增加了 rem、vh、
vw
、vm 等新
的
单位长度。 新技术
的
出现必然是为了解决旧技术存在
的
问题和不便，我们利用这些
css
html
5e
css3
原创
OnlyDawn
2022-11-26 10:06:17
10000+
阅读
Bootstrap
布局
（
CSS
布局
）
六、
css
布局
（
CSS
Grid） 1、3列（Three columns） <div class="grid"> <div class="g-col-4">.g-col-4</div> <div class="g-col-4">.g-col-4</div> <div class="g-col-4"> ...
Bootstrap
css
添加行
响应式
css布局
转载
mob60475700473b
2021-09-23 10:50:00
1128
阅读
2
评论
css
布局
CSS
（层叠样式表）
布局
是网页设计和开发中
的
关键部分，它决定了网页上元素
的
位置和外观。随着Web技术
的
不断发展，
CSS
布局
方式也经历了从简单到复杂、从单一到多样
的
演变。以下是对
CSS
布局
方式
的
详细探讨，。 一、基础
布局
方式正常文档流（Normal Flow） 正常文档流是
CSS
布局
的
基础，它遵循HTML元素
的
默认排列方式。块级元素（如、等）会垂直排列，占据父容器
的
整个宽度；而行内元素（如、等）则水
CSS
文档流
响应式布局
原创
涛弟写代码
10月前
79
阅读
VW
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
html
scala
原创
阿里CTO
2022-07-22 14:33:15
58
阅读
vw
的
适配
网页中字体大小最小是12px，不能设置一个比12像素还小
的
字体 如果我们设置了一个小于12px
的
字体，则字体自动设置为12 0.13333333
vw
= 1px 5.33333
vw
= 40px
前端开发
原创
wx62aac82759217
2022-06-16 17:47:43
157
阅读
css
布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
css布局
转载
精选
yerik_yao
2013-05-21 11:46:04
515
阅读
css
布局
CSS
（层叠样式表）
布局
是网页设计中至关重要
的
一环，它决定了网页元素在页面上
的
排列和显示方式。随着Web技术
的
发展，
CSS
布局
方式也经历了从简单到复杂、从单一到多样
的
演变。本文将详细介绍几种常见
的
CSS
布局
方式，旨在帮助读者更好地理解和应用这些
布局
技术。 一、静态
布局
（Static Layout） 静态
布局
是最基础、最简单
的
布局
方式。在这种
布局
中，网页元素
的
尺寸和位置都是固定
的
，不会随着浏览器窗口
Layout
CSS
屏幕尺寸
原创
余厌
10月前
136
阅读
css
布局
——Shapes
布局
CSS
Shapes
布局
用于实现不规则
的
图文环绕效果，需配合float一起使用。兼容性: 除IE和Edge外都支持shape-outside指定图形边缘1. 关键字<
css
前端
ide
php
转载
朝阳39
2022-07-12 17:26:36
368
阅读
首页
1
2
3
4
5
共100条记录
精品课程
免费资料>
2025软考
系统架构设计师
系统规划与管理师
软件设计师
系统集成项目管理工程师
信创认证
系统架构师
信创集成项目管理师
信创规划管理师
系统开发工程师
厂商认证
CKA/CKS架构师
红帽认证工程师
Oracle-OCP认证
Oracle-OCM认证
IT技术
数据库高级工程师
AIGC大模型实战
Linux云计算架构师
Python全栈开发
华为认证
数通HCIP认证
云计算HCIE认证
华为存储HCIE认证
HCIP安全认证
相关文章
css 布局
CSS布局
css 对比Android布局 css布局问题
css布局和Android css布局方案
css flex布局 兼容ios css中的flex布局
CSS3视口单位vw,wh
css中的像素单位px、em、rem、vh、vw
css60rem和60vw的区别
【CSS】CSS常见布局
相关搜索
全部
css vw
css vw vh
css vw支持
css vw的缺点
css3响应式布局vw
css3自适应布局单位vw
css中的vw
css的vw单位
css的vw布局
vw css
Copyright © 2005-2025
51CTO.COM
版权所有 京ICP证060544号
关于我们
官方博客
全部文章
热门标签
班级博客
了解我们
网站地图
意见反馈
友情链接
鸿蒙开发者社区
51CTO学堂
51CTO
软考资讯
