【HTML + CSS】CSS 响应式布局（一）

时间 2019-12-10

标签 HTML + CSS css 响应布局栏目 CSS 繁體版

原文原文链接

响应式开发的本质是针对多种屏幕作适配，首先须要掌握几个基本概念：javascript

物理像素：设备的屏幕实际像素点，如常说的 iPhone 6 Plus的分辨率是 1920 * 1080 像素。
设备独立像素：逻辑像素，用于定义应用的UI。
屏幕像素比（devicePixeRatio）：物理像素与设备独立像素的比值。

使用 rem 实现响应式布局

rem（font size of the root element）是 CSS的计量单位，表示相对于根（即 html）元素的字体大小。其主要用于移动 Web开发，以适配不一样尺寸的屏幕。css

rem的兼容能够经过 caniuse 查询html

因为 rem单位是相对于网页根元素的字号大小而定，因此实现 rem布局开发时，首先要作的就是对根元素的字号赋值。java

html{ font-size:12px; }

咱们将网页根元素的字号设置为 12px,此时 rem相对于网页根元素字号为 1rem = 12px。故此转换 rem的公式则为git

rem值 = 元素实际 px 值 / 网页根元素的字号

下面经过 rem实现一个简单的布局【预览】github

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Rem Case</title>
            <style>
                body {
                    font-size: 12px;
                    margin: auto;
                }
        
                .btns {
                    width: 10rem;
                    margin: 0 auto;
                }
        
                .btns > a {
                    float: left;
                    width: 2.5rem;
                    text-align: center;
                    padding-top: 0.2rem;
                }
        
                .btns > a > i {
                    display: inline-block;
                    width: 1.2rem;
                    height: 1.2rem;
                    background: gray;
                    border-radius: 50%;
                }
        
                .btns>a>span {
                    display: block;
                    line-height: 0.8rem;
                    font-size: 14px;
                }
            </style>
        </head>
        <body>
            <div class="btns">
                <a>
                    <i></i>
                    <span>英语</span>
                </a>
                <a>
                    <i></i>
                    <span>日语</span>
                </a>
                <a>
                    <i></i>
                    <span>德语</span>
                </a>
                <a>
                    <i></i>
                    <span>法语</span>
                </a>
                <a>
                    <i></i>
                    <span>韩语</span>
                </a>
                <a>
                    <i></i>
                    <span>小语种</span>
                </a>
                <a>
                    <i></i>
                    <span>教学</span>
                </a>
                <a>
                    <i></i>
                    <span>职场</span>
                </a>
            </div>
        </body>
    </html>

最后加上最关键的重置元素字号脚本浏览器

(function (window, document) {
        'use strict';
        // 获取网页根元素
        var html = document.documentElement || document.querySelector('html');
        // 重置根元素字号
        function resetFontSize() {
            // 获取根元素的宽度
            var width = html.getBoundingClientRect().width;
            // 设置一个最大宽度值
            if (width > 640) width = 640;
            html.style.fontSize = (width / 10) + 'px';
        }

        resetFontSize();
        window.addEventListener('resize', resetFontSize, false);
    })(window, document);

rem确实有效的解决了响应式布局，但却并不是完美：框架

对于脚本的依赖，须要使用 js脚本对其根元素的字号动态计算与赋值。
只能针对一个基准值去动态计算根元素字号大小，面对于宽高自适应且不出现滚动条这种布局，rem则显得无能为力，由于它基准值只能是一个，高度或宽度。

使用 vw、vh、vmin、vmax 实现响应式布局

vw、vh、vmin、vmax与 rem相同都是 CSS3中新引入的一种计量单位。不一样于 rem它们所表达的含义以下：ide

单位	含义
vw	等于视口宽度的 1%
vh	等于视口高度的 1%
vmin	相视的宽度或高度，取决于哪一个更小
vmax	相对于视的宽度或高度，取决于哪一个更大

vw、vh、vmin、vmax的兼容能够经过 caniuse 查询布局

在使用 vw、vh、vmin、vmax以前咱们须要认识一下视口。

以 PPK大神在其文章 A tale of two viewports （一）、A tale of two viewports （二）以及 Meta viewport 三篇文章中提出关于视口的解释：

在桌面端:

The function of the viewport is to constrain the <html> element,which is the uppermost containing block of your site.
译：视口的功能是约束 html 元素，它是网站上的包含区块。

The viewport, in turn, is exactly equal to the browser window: it’s been defined as such. The viewport is not an HTML construct, so you cannot influence it by CSS. It just has the width and height of the browser window — on desktop.

译：视口与浏览器窗口彻底相同，但它并非 HTML 结构，所以你不能经过 CSS 来影响它。在桌面端，视口只是具备浏览器窗口的高度与宽度。

以上是我在原文中截取的两段关于桌面端的视口概念，从中总结得知：在桌面端,视口就是浏览器的可视化区域，其只是具备浏览器窗口的高度和宽度，使用 document.documentElement.clientWidth/Height获取视口宽高。

在移动端：

Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.
译：设想布局视口是一个不改变形状和大小的大图像,如今你有一个更小的框架经过它你能够看到大的图像。这个框架被不透明的材料包围，遮挡了除大图像的一部分以外的其余部分。你能够经过框架看到的大图像的部分就是视觉视口（ visual viewport）。你能够缩小大图像直至看到整个大图像，或者你能够放大到只看其一部分。你能够去改变框架的方向，可是这个大图像（布局视口）的大小和形状永远不会改变.

The visual viewport is the part of the page that’s currently shown on-screen.The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.

译：视觉视口就是当前显示在屏幕上页面的一部分。用户能够经过滚动改变看到的页面的一部分，或者缩放以更改视觉视口的大小。

However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.

译：然而，CSS 布局，特别是百分比的宽度，是相对于布局视口计算的，它要比视觉视口宽的多。

How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

译：布局视口有多宽呢？每一个浏览器是不一样的，Safari 使用 980px，Opera 850px, Android WebKit 800px, IE 974px。

The <meta name="viewport" content="width=320">; originally an Apple extension but meanwhile copied by many more browsers. It is meant to resize the layout viewport.

译：<meta name="viewport" content="width=320">，最初是苹果的扩展，但同时被多个浏览器采纳，它是用于调整布局视口端口的大小。

以上是我在原文中对移动端视口概念的截取，从中总结可得知：

移动端的视口分为三部分:

视觉视口（visual viewport）：就是设备的屏幕区域，可是它所对应的并非指屏幕区域里的物理像素，而是 CSS像素。当用户缩小或放大时，测量会发生变化，由于更多或更少的 CSS像素会融入屏幕。使用 window.innerWidth/Height获取视觉视口的宽高。
布局视口（layout viewport）：与视觉视口不同，它是为了解决PC 端网站在移动端显示不佳的一个解决方案,它宽高不会改变，使用 document.documentElement.clientWidth/Height来获取布局视口的宽高。
理想视口（ideal viewport）：它是基于布局视口的，用于调整布局视口端口的大小。

既然提到了 理想视口（ideal viewport），那么就不得不普及一下 <meta name="viewport">。

viewport 属性

viewport是指屏幕上能用来显示网页的区域，默认状况下大多数设备的 viewport的宽度都是 980像素，能够经过在 heade元素中增长 meta标签来设置 viewport属性：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body></body>
    </html>

viewport下包含如下属性：

width：设置 viewport的宽度，为正整数，或者字符串 “device-width”。
initial-scale：设置 viewport的初始缩放值，为数字，能够带小数。
minimum-scale：设置 viewport的最小缩放值，为数字，能够带小数。
maximum-scale：设置 viewport的最大缩放值，为数字，能够带小数。
height：设置 viewport的高度。
user-scalable：是否容许用户缩放，值为 "yes" 或 "no"。

经过设置 viewport属性，能够调整用户界面的逻辑大小，页面 CSS中的大小均以 viewport为基准。

vw、vh、vmin、vmax 的使用

基础的东西说完了，接着回到 vw、vh、vmin、vmax的使用，它们相对于 PC 端浏览器的视口就是浏览器的可视化区域 ，而在移动端则为布局视口，仍是以第一个案例为例，使用 vw实现布局【预览】：。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VW Case</title>
    <link rel="shortcut icon" href="../../assets/images/icon/favicon.ico" type="image/x-icon">
    <style>
        body {
            font-size: 12px;
            margin: auto;
        }

        .btns {
            width: 80vw;
            margin: 0 auto;
        }

        .btns>a {
            float: left;
            width: 20vw;
            text-align: center;
            padding-top: 10px;
        }

        .btns>a>i {
            display: inline-block;
            width: 10vw;
            height: 10vw;
            background: gray;
            border-radius: 50%;
        }

        .btns>a>span {
            display: block;
            line-height: 3vw;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="btns">
        <a>
            <i></i>
            <span>英语</span>
        </a>
        <a>
            <i></i>
            <span>日语</span>
        </a>
        <a>
            <i></i>
            <span>德语</span>
        </a>
        <a>
            <i></i>
            <span>法语</span>
        </a>
        <a>
            <i></i>
            <span>韩语</span>
        </a>
        <a>
            <i></i>
            <span>小语种</span>
        </a>
        <a>
            <i></i>
            <span>教学</span>
        </a>
        <a>
            <i></i>
            <span>职场</span>
        </a>
    </div>
</body>

</html>

vw、vh、vmin、vmax的出现给个人感受显得有些鸡肋，有点像 %，但与百分比最大的不一样则是 % 是相对于父元素的大小设定的比率，vw、vh是视口大小决定的。在使用它的过程当中，我的认为它并不适合去作布局，而是去作一些元素大小的限制。固然，也是由于我的能力有限，并无悟透，但愿可以获得大神的指点。