一、px像素单位

px单位是绝对单位，一般用于pc端网页开发。因为是绝对单位所以在移动端上的使用体验并不是很好

举例：

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: aqua;}</style>
</head><body><div></div>
</body></html>

pc端

移动端

px单位在pc端都是200px，并没有随着屏幕尺寸而变换

二、rem单位

rem它是描述相对于当前根元素字体尺寸，是相对单位。它可以根据根元素的变换而变换，根元素一般指的是html的font-size，默认值是1rem=16px

举例：

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 5.3333rem;height: 5.3333rem;background-color: aqua;}</style>
</head><body><div></div>
</body></html>

pc端：

手机端：

rem单位是相对单位所以可以很好的适配手机端

三、vw和wh单位

vw跟wh单位是指相对于视口的宽度视口的宽度或者高度的长度单位。1vw为视口宽度的百分号之一，1vh为视口长度的百分之一。vw跟vh是根据视口尺寸而变化的所以常用于手机端。vw跟wh不能同时作用与一个元素上

举例：

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 26.6667vw;height: 26.6667vw;background-color: aqua;}</style>
</head><body><div></div>
</body></html>

手机端：

这是vw的举例说明而vh也是如此，盒子的vw单位没变但是随着手机屏幕大小发生改变，盒子的大小也发生了改变。

网页开发的一些尺寸单位相关推荐

网页开发的尺寸单位 px，百分比，em，rem
网页开发的尺寸单位平时写pc端页面时,一般是px作为单位,遇到一些比较复杂的需要定位的也会夹杂使用百分比;但是在移动端时候px很容易布局就会乱,如果使用的是相对单位比如 em,rem 下面就说他们之 ...
web前端入门到实战：网页开发中字体，字号与尺寸对应表
了解字体的一样常识,不管做一份文档编辑还是网页开发,都是很有必要的.整齐划一,井然有序才终是大家之道. 1.字体在文档编辑中,我们常用的是宋体,小四号字,新罗马字体,字母和数字用的是Arial字体, ...
web前端知识总结二（css（其他）+移动web网页开发）
web前端知识总结二(css(其他)+移动web网页开发) 文章目录 web前端知识总结二(css(其他)+移动web网页开发) 字体图标平面转换-位移位移:绝对定位居中开门效果旋转转换原点 ...
H5网页开发新手入门-H5网页如何适应不同手机屏幕分辨率？
一.问题汇总手机网页怎么制作? 怎么让网页适应不同手机屏幕? H5网页设计到底该设计多大尺寸? rem怎么自适应布局? H5一屛页面如何自适应屏幕? viewport该怎么写? width=devi ...
移动端网页开发-vh/vw/rem
第一次做移动端网页开发,接触到的几个单位vh/vw/rem,记录一下. vh:相对可见视区的高度 vw:相对可见视区的宽度 rem:相对根元素的字体大小 "视区"所指为浏览器内部的 ...
JavaScript -- jQuery网页开发案例笔记
视频地址:黑马程序员前端基础必备教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili 视频代码地址:JavaScript_jQuery测试案例: 本仓库是学习jQuery相关知识.视频网址: ...
移动端H5网页开发必备知识
简介工欲善其事必先利其器,今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案.如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的移动端H5网页开发常见问题汇 ...
移动端网页开发三（纠结适配的那些年）
前面两篇文章介绍了移动端网页开发所要具备的基础知识. 今天着重来讲解移动端的适配方案. 做PC端页面的工程师聊的最多的是兼容,这是因为浏览器之间的差异引起的.而移动端基本是没有兼容问题的,全是css3 ...
Day01_网页开发基础知识、HTML概述、HTML标签
01.01_网页开发基础知识代码编写工具 python PyCharm Subline iPython... HTML HBulider Dreamweaver WebStorm Eclipse.. ...

网页开发的一些尺寸单位

一、px像素单位

举例：

二、rem单位

举例：

三、vw和wh单位

举例：

网页开发的一些尺寸单位相关推荐

最新文章

热门文章