设计师学前端：响应式Responsive web
响应式web
首先：
<html>
<head>中加入
<meta name="viewport" content="width=device-width, initial-scale=1.0">
表示设备视图以1比1的比例全屏显示
分开样式表：
因为css分为主样式(main.css)和响应式样式(responsive.css)，最好用外联式css分开写，如:
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 ... 后面要加入声明括号{}
选择器后面，也要加入声明括号{}.
页面断点都是页面布局有变化的地方
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模式下即可查看
image.png
这里可以看到图片的Type/Size/Time等属性
如果想看内容加载时间(Waterfall)勾选“关闭缓存”(disable cache)再刷新就可以看到了。
查看图片原始尺寸方法如下：
在Elements标签下，鼠标悬浮在图片名上，即可看到，当前显示尺寸和原始尺寸。
calc 使用方法
图片响应式布局时，经常会有以下情况出现：
图片随页面大小自动放大缩小图片，而图片之间有固定的间距。
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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/banner-600.jpg" srcset="images/banner-1200 2x, images/banner-600 1x" alt="banner" />
上面代码可以这样理解，默认情况下使用
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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
共同学习，写下你的评论
评论加载中...
作者其他优质文章
