Awesome Open Source
Awesome Open Source

页面结构布局

单位

px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对屏幕的,一个像素1px就是屏幕上的一个点,即屏幕分辨率的最小分割。由于它是固定大小的单位,单独用它来设计的网页,如果适应大屏幕电脑,在小屏幕手机上就会很不友好,做不到自适应的效果

em单位的名称为相对长度单位,它是用来设置文本的字体尺寸的,它是相对于当前对象内文本的字体尺寸;如果没有人为设置当前对象内文本的字体尺寸,那么它相对的是浏览器默认的字体尺寸16px

相对长度单位,它的出现是为了解决em的缺点,em可以说是相对于父级元素的字体大小,当父级元素字体大小改变时,又得重新计算。rem出现就可以解决这样的问题,rem只相对于根目录,即HTML元素。所以只要在HTML标签上设置字体大小,文档中的字体大小都会以此为参照标准,一般用于自适应布局

view heightview width的简写,是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px,即1 vh = 1200px/100 = 12 px

总结:

  • px是固定长度单位,不随其它元素的变化而变化
  • em%是相对于父级元素的单位,会随父级元素的属性font-size或其它属性变化而变化
  • rem是相对于根目录HTML元素的,所有它会随HTML元素的属性font-size变化而变化
  • px%用的比较广泛一些,可以充当更多属性的单位,而emrem是字体大小的单位,用于充当font-size属性的单位
  • 一般来说:1em = 1rem = 100% = 16 px

视口

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域

  • 布局视口(layout viewport)

以屏幕分辨率为基准,实际上布局视口的宽度要比屏幕宽出很多,以上图片显示的尺寸就是 layout viewport

  • 视觉视口(visual viewport)

layout viewport的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,这个viewport叫做visual viewport。在JS中可以通过window.innerWidth来获取

  • 理想视口(ideal viewport)

一个能完美适配移动设备的视口,需要手动添加meta标签,一般视口大小都设置为设备大小

<meta name="viewport" content="width=device-width">

举个例子,手机上的浏览器是全屏的,手机实际宽度是320像素(即visual viewport),而手机分辨率是980宽度(即layout viewport),所以手机上打出来的是980而不是320,如果设置了meta完美适配设备(即ideal viewport)

  • meta标签属性

利用以下属性对viewport进行控制, 可多个同时使用,并用逗号隔开

  • width设置layout viewport的宽度,为一个正整数,或字符串device-width
  • initial-scale设置页面的初始缩放值,为一个数字,可以带小数
  • minimum-scale允许用户的最小缩放值,为一个数字,可以带小数
  • maximum-scale允许用户的最大缩放值,为一个数字,可以带小数
  • user-scalable是否允许用户进行缩放
    • no代表不允许
    • yes代表允许

所以如果不定义viewpoint的话,页面宽度以屏幕分辨率为基准,而设置以后可以根据设备宽度来调整页面,达到适配终端大小的效果

动态设置字体大小及viewport

<script type="text/javascript">
    // 把尺寸放大N倍(N是window.devicePixelRatio)
    // 物理像素*设备像素比=真实像素
    var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
    document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
    
    // 把屏幕的倍率缩小到N分之一(N是window.devicePixelRatio)
    var scale = 1/window.devicePixelRatio;
    var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
    document.getElementById("vp").content = mstr;
</script>

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
css (7,433
lua (2,187
layout (181
flexbox (101
responsive-layout (18