自适应网页设计

干燥计划 Feb 15, 2020

自适应网页设计


思想

一次设计,普遍适用。

方法

允许网页宽度自动调整

在网页代码头部加入:

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

这行代码包含在自动生成的 HTML5 框架内。

不使用绝对宽度

使用 width: xx%;width: auto; ,替代 width: xxx px;

使用相对大小的字体

指定字体大小为页面默认大小的 100%,即 16 像素:

body { font: normal 100% Helvetica, Arial, sans-serif; }

再指定 h1 大小为默认的 1.5 倍,即 24 像素:

h1 { font-size: 1.5em; }

流动布局(fluid grid)

各个区块的位置都是浮动的,而非固定不变的。

.main {
    float: right;
    width: 70%; 
}

.leftBar {
    float: left;
    width: 25%;
}

float 的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向 overflow(溢出),避免了水平滚动条的出现。

尽量不要出现 绝对定位(position: absolute)

选择加载 CSS

如果屏幕宽度小于 400 像素(max-device-width: 400px),就加载 tinyScreen.css 文件**:**

<link rel="stylesheet" type="text/css"
    media="screen and (max-device-width: 400px)"
    href="tinyScreen.css" />

如果屏幕宽度在 400 像素到 600 像素之间,则加载 smallScreen.css 文件:

<link rel="stylesheet" type="text/css"
    media="screen and (min-width: 400px) and (max-device-width: 600px)"
    href="smallScreen.css" />

图片的自适应(fluid image)

img { max-width: 100%;}

参考与致谢

知识共享许可协议
本站文章除特别声明外,均采用 知识共享署名 - 非商业性使用 - 相同方式共享 4.0 国际许可协议 进行许可。
您的支持将鼓励我们继续创作!

Power Lin

一个不会讲故事的硬件工程师,不是一个合格的产品经理。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.