Day_1.《无懈可击的Web设计》_灵活的文字_html/css_WEB-ITnose
程序员文章站
2022-04-15 10:26:33
...
常见的方法 不管使用哪种浏览器或者设备来查看,文字看起来都大小一致。 以像素为单位设定文字大小之后,Windows平台上的IE用户无法随意改变浏览器文字大小。 不适合响应式开发
em:相对于父元素的字体大小 ex:相对于特定字体中字母x的高度 px:相对于特定设备的分辨率,是最常用的单位 rem:根据根元素的字体大小计算出的值 除此之外还有一些绝对单位,在打印的时候比较有用,在此不列举了。
larger smaller
xx-small x-small small medium large x-large xx-large
百分比是根据父元素设定,所以慎用嵌套百分比
注意: em 也存在嵌套的问题
使用rem不必考虑上下文和嵌套,只需根据根元素指定大小。
响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该肿么办?这就是 vh 和 vw 单位为我们提供的。
vh和 vw 依据于视口的高度和宽度,相对的,vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如,浏览器的宽度设置为1100px,高度设置为700px, 1vmin = 7px, 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则为10.8px。
body{ font-size:12px;}
使用像素单位的优点:
为什么这么做不是无懈可击的?
我们有哪些选择?
长度单位
表示相对大小的关键字
百分比值
表示绝对大小的关键字
他们之间都是以1.5倍为差
无懈可击的方案:
关键字+百分比,放弃像素级别的精确度
用法:
body{ font-size:small; } h1{ font-size:150%; }
需要注意的地方:
通过em实现灵活的文字
用法:
body{font-size:62.5%;} /* 设置为10px大小*/
rem单位
补充几种响应式中使用的单位
vh and vw
1vh 等于1/100的视口高度。栗子:浏览器高度900px, 1 vh = 900px/100 = 9 px。同理,如果视口宽度未750, 1vw = 750px/100 = 7.5 px。比如,我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。
.slide{ height:100vh; }
vmin and vmax
可以这样定义一个至少有两个边触摸到屏幕的方形:
.box{ height:100vmin; width:100vmin }
如果你要让这个方形框框始终铺满整个视口的可见区域(四边始终触摸到屏幕的四边)
.box{ height:100vmax; width:100vmax; }
结合使用这些单位可以为我们提供一个新颖有意思的方式来灵活地利用我们视口的大小。
上一篇: 【MySQL案例】error.log的Warning:If a crash happens thisconf
下一篇: LCS算法&最大公共子串&最长公共子序列 PHP 实现 最长公共上升子序列 最长公共子序列c语言 最长公共递增子序
推荐阅读
-
具有动态效果的响应式设计_html/css_WEB-ITnose
-
菜鸟关于网页设计的一个小问题,在线等答案~_html/css_WEB-ITnose
-
像csdn博客文章中图片和文字、代码等的排版是如何在服务器数据库中存储的?_html/css_WEB-ITnose
-
设计网页页脚的15个超实用技巧_html/css_WEB-ITnose
-
响应式WEB设计的9项基本原则_html/css_WEB-ITnose
-
在网站设计中非常有用的10款在线生成工具_html/css_WEB-ITnose
-
如何让下图中的红色部分(span)内的文字相对于红色部分竖直方向上居中呢?源代码如下,图在第二楼_html/css_WEB-ITnose
-
程序员和设计师必备的20个CSS工具_html/css_WEB-ITnose
-
Div+CSS网站设计的优点_html/css_WEB-ITnose
-
菜鸟关于网页设计的一个小问题,在线等答案~_html/css_WEB-ITnose