HTML _ HTML 响应式设计

HTML 响应式设计

什么是响应式网页设计

响应式网页设计（Responsive Web Design）就是网页能自动适应不同尺寸的浏览器窗口（PC端浏览器、平板电脑浏览器、手机浏览器等）。狭义上来说，是通过HTML和CSS来达到自适应的功能；广义上来说还包括另外一种方式，即在服务器端通过user-agent来识别访问设备类型而返回相应的网页源码（对于并非专注于前端的独立型全栈开发者，更推荐这种方式）。

设置 Viewport

制作响应式网页或者移动端网页，往往要在网页头部添加如下元素。

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

为了手机端网页的用户体验，推荐限制用户对网页的放大行为，如下设置更佳。

<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, user-scalable=no">

手机端的网页尽量使用 width:100%

因为手机有不同的宽度，且手机就那么窄，因此为了更好的用户体验，最好是把尽量把一些元素的宽度设置成100%的宽度。使用width:100%或者max-width:100%来做这件事情。

<img src="https://logo.zhuanfou.com/program-logo-60.png" style="max-width:100%;">
<img src="https://logo.zhuanfou.com/jerkzhang_1540460792_response-background.jpg" style="max-width:100%;">
<div>
为啥有些情况下不直接用width而是max-width?
因为有时这是一张很小的图片，宽度远小于手机宽度，且本身就是希望其原有大小，
这时候用max-width会很适合
</div>

运行一下

根据浏览器大小显示不同的图片

这是一个并不常用的技巧，不必深究；以前其实说到过的，就是picture元素，它非常灵活，有助于创建自适应网页，以兼容更多设备的屏幕大小。

在picture元素内，会存在若干source元素。每一个source元素即代表一张特定的源图片，特定的源图片会被在指定的某情况下展示，从而使图片更加适应不同大小的视窗。

picture元素内的source元素的优先级是从上往下，一旦是指定触发情况的source元素，浏览器即会显示该source元素，而之后的source元素等（包括img元素）就不会被显示了。

<h1>专否提示：变动浏览器的宽度看效果！</h1>
<picture>
  <source media="(min-width: 700px)" srcset="图像1的url地址">
  <source media="(min-width: 500px)" srcset="图像2的url地址">
  <img src="图像3的url地址" style="width:auto;">
</picture>

运行一下

自适应的文字大小

文字大小有一种单位叫“vw”，其实就是“viewport width”的缩写。

通过这种方式字体大小就会随着浏览器窗口的大小而改变。viewport的大小就是浏览器窗口的大小，1vw就是窗口宽度的1%；以此类推，浏览器窗口大小是1200px宽，那10vw就是120px。（不要在专否沙盒里实验这个功能，因为沙盒环境的viewport是固定的，自己写个网页试试就好啦，反正也是不常用的功能，该教程就是这么偏颇专断，请称之为独断专横的HTML邪教程）

<h1 style="font-size:10vw">专否</h1>

media查询

所谓的media查询，就是根据浏览器大小定义不同的css样式。如下例所示，当浏览器的宽度短于800px的时候，下面的3个div元素就会从水平分布变成垂直堆叠。（别在专否沙盒实验如下代码，沙盒的宽度是不会变的。）

<style>
 .fuck-left {
   float:left;width:20%;height:80px;background:#d98062;
 }

 .fuck-middle {
   float:left;width:60%;height:80px;background:#d4db54;
 }

 .fuck-right {
   float:left;width:20%;height:80px;background:#46acb6;
 }

 @media screen and (max-width: 800px) {
  .fuck-left, .fuck-middle, .fuck-right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
 }
</style>

<div class="fuck-left"></div>
<div class="fuck-middle"></div>
<div class="fuck-right"></div>

使用 Bootstrap 前端库

Bootstrap开源库是twitter开源出来的前端库，专断而言，Bootstrap是世界上最屌的前端模板，暂时没有之一。这里不展开而言。使用Bootstrap也可以达到网页自适应。知道这件事就好，后续学Bootstrap的时候再去看即可。

HTML 响应式设计

推广