移动端开发,几个你可能不知道的CSS单位属性。

1. rem

"em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小;“rem” 中的 “r” 代表 “root”,它表示以根(即“html”)元素的单位大小为基准来设置当前元素的单位大小,所以不管当前元素是任意子节点,一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的,这里的 “em” 和 “rem” 均具有继承性。

2. vw 和 vh(移动端开发个人最喜欢的单位属性,也是这次介绍的重点)

传统的响应式开发中,我们常常用百分比来布局,然而这并不是最好的解决方案。例如,你没有办法以body的高度来设置百分比。

"vw" 的全称是 “viewport width” 即视窗的宽度;"vh" 的全称是 “viewport height” 即视窗的高度。

1vw = viewportWidth * 1/100; 1vh = viewportHeight * 1/100;

所以元素使用 “vw” “vh” 作为宽度和高度单位,即可以保证适配不同的设备。

3. vmin 和 vmax

“vmin” 即 “viewport” 宽度和高度相比较最小的那一个。(也就是说,如果当前元素单位设置了 “vmin” 那么浏览器会去判断宽度和高度的大小,然后继承小的值)

“vmax” 同理,继承宽高比较,大的那一个值;即,宽和高谁大,就继承谁的值。

这里我们假设:浏览器的宽度为1300px,高度为960px;

50vmin = 960 * (50/100);
50vmax = 1300 * (50/100);

4. ex 和 ch

这两个单位在我们平时开发中会很少用到,这里就不做详细的阐述了。下面就放一张图解释这两个单位的含义,若是有兴趣的朋友的可以自己查一下资料。

时间: 2024-10-31 06:25:20

移动端开发,几个你可能不知道的CSS单位属性。的相关文章

浅谈在网页中你所不知道的css背景属性

在很多网页设计中,很多人对于css的背景属性,只是停留在设置背景.今天我们来谈谈它的其他应用. 比如背景的定位,它能实现很多翻转网页效果. background-position:指定背景图像的位置background-size 指定背景图片的大小background-image 指定要使用的一个或多个背景图像background-repeat 指定如何重背景图像background-origin 指定背景图像的定位区域background-clip 指定背景图像的绘画区域background-

你所不知道的 CSS 负值技巧与细节

原文:你所不知道的 CSS 负值技巧与细节 写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号.嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构: <div></div> div { width: 200px; height: 200px; outline: 20px solid #000; outline-of

您可能不知道的CSS元素隐藏“失效”以其妙用

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2191 一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击

您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolut

你可能不知道的 css 内容块

position 我们都知道元素都拥有 position 这个 css 属性,先来看看他的基本定义和可用值. 定义 position 决定了元素位置是如何被渲染的 可用值 static: 默认值,元素在文档流中依次渲染 absolute: 元素位置相对于其最近的非 static 的父元素 fixed: 元素位置相对于浏览器窗口 relative: 元素位置相对于原本应该渲染的位置 sticky: 根据滚动的位置在 relative 和 fixed 之间切换 initial: 设置为默认值 inh

你有可能不知道的css浮动问题

最近在开发过程中,有的时候会经常遇见明明知道需要这样做,但是为什么要这样做的原因我们却总是不明所以然. 先来解释下什么叫做清除浮动吧: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 如上定义,当容器的高度为auto的时候,我们使用

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来 课程持续更新中..... 我是RichardCao,现任新美大酒店旅游事业群的Android Developer.如果你也有兴趣录制RN视频,请加入下面QQ群找我. 下载地址:https://pan.baidu.com/s/1c1XmE56 密码:shhw 首发地址:菜鸟窝-ReactNative学习板块 交流QQ群:576089067 课程目录:菜鸟窝React Native 系列教程

WIFI物联网平台微信端开发分享

本文由企鹅圈原创成员Hunter_Zhu贡献. 本篇文章是基于近期一个项目微信端开发过程的一个总结.文中主要介绍了云智易平台下微信端开发的流程.该平台提供的主要功能以及此次H5开发使用到的一些UI组件.能够帮助企鹅仔高速对该平台微信开发有个了解. 本文介绍的微信硬件物联网开发思路不局限于某个平台.对市场上全部的平台,如机智云也是适用的,特此说明. 一.创建微信应用,配置微信server 在云智易开发平台中,开发人员须要在应用管理中创建一个微信应用,填写微信公众号的基本信息:APPID, APPS

一起学Google Daydream VR开发,快速入门开发基础教程一:Android端开发环境配置一

原文因涉及翻墙信息,被强制删除,此文为补发! 准备工作 进入Google Daydream开发者官网,开启准备工作,官网地址:https://vr.google.com/daydream/developers/ -------------------------------------------------------------------------------------------------------------------- Google Daydream开发者网址: https