网页屏幕适配

关于网页屏幕适配的研究.

名词

1英寸=2.54cm

屏幕的手机尺寸是按对角线长度计算的,比如一个手机尺寸是5.2英寸,那么表示屏幕对角线长度是5.2英寸.(注意英寸是长度单位)

像素(px)是分辨率的单位,比如分辨率为1920px1080px,就类似于有19201080个像素格子

但要注意的一点!像素没有固定的物理大小,在不同屏幕上可能不同.

可以这么理解,屏幕像素密度就是在一个对角线长度为1英寸的正方形内所拥有的像素数

PPI越大显示效果越精细(只是个视觉上的效果).

公式为: PPI = sqrt(横向像素数^2+纵向像素数^2)/屏幕尺寸

由公式可以得出:

px是绝对的像素,问题是用户放大/缩小网页会破坏原有布局

em是相对父元素的大小(这里的大小指根元素的font-size值,下同),但因为受父元素影响,因此会有无法预知的风险.

rem是相对根元素html的大小,是css3新引入的,更加适用.

手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

把超出的部分留白,这样布局起来简单了很多,但主要的问题是在大屏幕上页面会显得特别小.

就好比所有宽度都是相对的,左边占30%,右边占70%,不管屏幕宽度变大还是变小,各元素占用空间的相对比例还是不会变的.
屏幕大点,就显示得大点,屏幕小点,就显示得挤点,布局都是一致的.
这里的放大缩小指元素,而不是文字,一般文字可能靠左或居中,元素大小变了但字体还是不变的.
对于图片来说,更接近元素而不是文字,因此屏幕大小变化时一般图片也会跟着缩放(但图片的宽高比不能变!否则就变形了!).
但对于高度来说,就随意了,因为一般也是用滚动条的,因此有些元素会设置固定宽高比,这样宽度变化时,高度也会跟着变化(否则元素不就变形了吗?),但也不是全部,有些元素可能高度固定就好.

响应式就是根据屏幕大小不同来设置不同的css,主要使用media query技术,比如屏幕小时隐藏一些内容或采用不同的布局(比如从水平排列变为垂直排列).

但响应式工作量会大很多,除非使用专门的响应式框架如bootstrap.

大型网站一般不这么做,因为工作量大,维护困难,一般中小型的网站会适合些,反而因为不用弄专门的手机版本而节约时间.

与自适应的比较: 自适应主要是为了解决让网页根据不同的屏幕大小而自动调整网页内容大小,但主体内容与布局仍然没有变. 但在屏幕过小时,自适应也会暴露出问题,即内容过于拥挤,而响应式就是为了解决这个问题的.

通过设置根元素html的font-size来调整网页的元素大小.具体设置根元素大小的方式主要有两种:

此外发现一点,一般好像用根元素html的font-size来调整页面中元素的大小,如果不想某些元素被根元素的font-size影响到,可以在body元素上设置font-size,它会覆盖html的font-size,但rem仍然是根据html的来设置的.

允许网页宽度自动调整:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

图片的自动缩放很简单:

    img { max-width: 100%;}

但有条件的话,仍然推荐根据不同大小屏幕加载不同分辨率的图片.