从PC端过渡到移动端网页设计

PC端网页设计

2013年的时候,有做过资讯展示类的网站,我们会把网页内容宽度定为 980px 左右并居中:

#main {
    width: 980px;
    margin: 0 auto;
}

这里因为当时的主流的电脑屏幕分辨率为 1024x768 ,而现在 1920x1080 甚至 2K 屏都很常见了,有的网站开始设置更大的内容宽度。

前面 CSS 中的 pxpixels 的简称,即 CSS 像素,是WEB编程使用的一种逻辑像素;另一种则是设备像素(device pixel),也称为物理像素或屏幕分辨率;在PC端,往往 CSS 像素和设备像素是 1:1 的关系。

但是,当我们用手机浏览器打开这些网站,会惊讶地发现网页布局和PC端浏览器下一致,只是由于手机屏幕尺寸太小,文字需要手工放大才能看清。

其实手机浏览器只是做了一个简单处理:

假定网页是 980px 然后按一定比率缩放到手机屏幕宽度

这样手机浏览器可以展示绝大多数针对PC设计的网站。

移动端网页设计

前面所述的手机浏览器对PC端网页做的处理,用 viewport 来表示,默认值类似下面这样:

<meta name="viewport" content="width=980" />

initial-scale 的值自动进行计算,手机浏览器默认的字体大小为 16px ,看起来会很小。

可以为网页指定适用于手机端展示的 viewport

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

我手上的 “魅蓝 NOTE 5” 屏幕为 5.5 英寸、分辨率 1920x1080 ,系统自带浏览器获得的设备像素比率为 3 ,竖屏时 CSS 像素表示的屏幕宽度( screen.width )为 360px (即 1080/3=360 ),默认的字体大小( 16px )视觉上看起来正好。

可以采用以下方式适配手机屏幕

  • 指定适用于手机端的 viewport
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
  • 使用媒体查询适配常见尺寸的手机

    如下只改变默认的字体大小,其它地方都使用 rem 单位以实现自适应,同时根据屏幕尺寸调整页面布局。

    @media screen and (max-width:760px){
       html { font-size: 66.5%; }
       #sidebar { float: left; width: 8rem; }
    }
    @media screen and (max-width:360px){
       html { font-size: 50%; }
       #sidebar { float: none; width: 100%; }
    }
    

web