设计师学前端：响应式Responsive web
2018-08-19 本文已影响2人
HU_Wei
响应式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;
}
查看图片基本属性：
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%) 则无效。
