设计师学前端：响应式Responsive web-原创手记-慕课网

响应式web

首先：

<html>
<head>中加入

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

表示设备视图以1比1的比例全屏显示

分开样式表：

因为css分为主样式(main.css)和响应式样式(responsive.css)，最好用外联式css分开写，如:

webp

image.png

<head><link rel="stylesheet" type="text/css" href="main.css"><link rel="stylesheet" type="text/css" href="responsive.css"></head>

在完成基础的index.html和main.css内容后，需要为responsive.css内加入流动模型样式:

/*content代表响应式内容*/.content {    display: flex;    flex-wrap: wrap;
}

这样，就可以通过@media screen and （）来为不同断点，设置不同样式了。例如：

      @media screen and (min-width: 0px) and (max-width: 400px) {          body {       background-color: red; 
          }
      }
    
      @media screen and (min-width: 401px) and (max-width: 599px) {          body {       background-color: green;
          }
      }
      
      @media screen and (min-width: 600px) { 
          body {       background-color: blue;
          }
      }

在 0 和 400像素之间，将背景色设置为红色
在 401 和 599 像素之间，将背景色设置为绿色
600像素或更宽，将背景颜色设置为蓝色

注意：
@media screen and ... 后面要加入声明括号{}
选择器后面，也要加入声明括号{}.

页面断点都是页面布局有变化的地方

webp

image.png

块水平居中

.container {          width: 800px;          margin: 0 auto;
        }

或者

{      width:800px;      margin-left: auto;      margin-right: auto;
}

块水平垂直居中

{
    position: relative; // 或者: absolute;    
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

查看图片基本属性：

command+option+J 调出 DevTool
在下图Network模式下即可查看

webp

image.png

这里可以看到图片的Type/Size/Time等属性

如果想看内容加载时间(Waterfall)勾选“关闭缓存”(disable cache)再刷新就可以看到了。

查看图片原始尺寸方法如下：

webp

在Elements标签下，鼠标悬浮在图片名上，即可看到，当前显示尺寸和原始尺寸。

calc 使用方法

图片响应式布局时，经常会有以下情况出现：
图片随页面大小自动放大缩小图片，而图片之间有固定的间距。

webp

image.png

可以在<style>中这样设置：

 <style>
    body {      margin: 0;
    }    img { 
      margin-right: 10px; 
      /*以上代表图片之间的间距为10px*/
      float: left;      width: calc((100% - 20px)/3); 
      /*以上通过运算得出每张图片在当前分辨率下的宽度： 
      100% 减去 2个10px间距 除以3张图 */ 
    }    img:last-of-type {margin-right: 0;}     /*以上选择器img:last-of-type相同父辈元素下最后一个元素的样式*/
  </style>

img:last-of-type选择器快速选择同级元素最后一个元素

注意： + 和 - 运算符两侧必须有一个空格。（* 和 / 两旁不需要空格，因为这是关于否定（negation）歧义的问题）。例如， calc(100px - 10%) 有效， calc(100px-10%) 则无效。

图片在视窗中响应式显示

先学习一个概念: Viewport Height / Viewport Width
vh，是指CSS中相对长度单位，表示相对视口高度(Viewport Height), 1vh=1%*视口高度。
同理，vw就是 Viewport Width。

将 height 或 width 设置为 100vmax 会满屏显示 height 或 width 且图片不会被拉伸
如果给图片设置 100vmin 则最大显示图片原始尺寸
如果想要图片在视窗中响应式显示，则需同时设置height 和 width 为 100vmax，如下：

img { height: 100vmax; width: 100vmax;
}

不同屏幕像素显示不同图片

使用 <srcset> 标签

使用 <srcset> 的优势可以大致理解为，它可以让浏览器根据情况（比如浏览器宽度、屏幕像素密度等条件）载入同样图片内容的不同图片资源（比如，不同分辨率的图片），以实现图片的完全响应功能。

以下为例，大致步骤：

首先需要将原始的图片 images/banner.jpg 压缩/剪裁为不同清晰度（分辨率）的图片，比如 banner-1200.jpg、 banner-600.jpg。
在 <img> 里添加 srcset 属性，以让浏览器根据不同情况载入不同的图片资源。srcset 有多种使用方法，这里分享其中一种，即根据屏幕的像素密度来载入不同图片资源。
参考将此行改为这样：
```
<img class="banner"
     src="images/banner-600.jpg"
     srcset="images/banner-1200 2x, images/banner-600 1x"
     alt="banner" />
```
上面代码可以这样理解，默认情况下使用 src="images/banner-600.jpg" 这个图片资源，如果某个设备屏幕像素密度为 2X 则载入图片 images/banner-1200.jpg，如果像素密度为 1X 则载入 images/banner-960.jpg。

让页面左右固定不可滑动

html {    overflow-x: hidden;
}

作者：HU_Wei
链接：https://www.jianshu.com/p/ba36ad9ef0a9