实现响应式布局的网站
响应式
响应式网页设计是一种解决问题的途径，它建议设计和开发应该根据用户行为和环境（基于屏幕大小，平台和方向）进行响应，这种实践由灵活的网格和布局、图片和CSS媒体查询的智能使用所构成。当用户从他们的便携式电脑切换到iPad的时候，网站应该自动切换合适的分辨率，图片尺寸和脚本能力。换句话说，网站应该能够自动响应用户的设备参数。这样就没必要对市场上每一种设备都要进行不同的设计和开发。
解决方案
0 根据屏幕分辨率调整样式
相关工具：viewport、@media媒体查询、利用JavaScript在不同的样式表间切换，重新排放使之适应不同的窗口宽度。
什么是viewport？
viewport是用户网页的可视区域/设备上浏览器的默认viewport的宽度。基于用户窗口的宽度来改变设计的布局宽度，使得整个设计总能适应屏幕的宽度，无需使用水平滚动条。
viewpor content属性值中的这四个参数，分别代表 :
width:可视区域的宽度，值可为数字或关键词device-width（CSS像素和物理像素不同）
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0,minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no禁止缩放
1 元素做成响应式：
1.1文字做成响应式
1.1.1 自适应式文字
相关工具：em单位
1.1.2 如果想要对每一行特定的文本字符进行优化，我们可以使用弹性布局，它基于用户的文本大小来改变布局宽度
相关工具：flex
1.2 图片和视频做成响应式：
1.2.1隐藏和显示部分图片
相关工具：display：none、visibility（visible | hidden | collapse）
1.2.2 创建变化的复合图片
相关工具：媒体查询、overflow（visible | hidden | scroll | auto）
1.2.3 随着布局缩放的前景图片
相关工具：max-width、max-width+媒体查询（使得设计在极端的尺寸下不要被拉得太长/压得太扁）
2 布局做成响应式：
2.1流式布局（liquid layout）：
根据页面宽度，对已存在于网页中的元素进行重新布局。
相关工具：max-width、max-width+媒体查询（限定弹性程度）
2.2弹性布局（elastic layout）：
在间隔一致的水平或垂直的线所形成的网格中设计一致的模式。
相关工具：flex、max-width、max-width+媒体查询（限定弹性程度）
2.3布局网格（layout grid）
在间隔一致的水平和垂直的线所形成的网格中设计一致的模式。
相关工具：grid（做法是定义一个容器元素并设置display：grid，使用grid-template-columns 和 grid-template-rows属性设置网格的列与 行的大小，然后使用grid-column 和 grid-row属性将其子元素放入网格之中。与flexbox类似，网格项的源顺序无关紧要。为了更好地使你的网格与媒体查询相结合使用，你可以在 CSS 中任意放置。）
实例分析：
NASA主页在两种窗口宽度下的页面显示状态：
因为我们要用响应式，所以一开始先在html中加入viewport 声明：meta name=“viewport”content=“width=device-width,initial-scale=1.0, minimum-scale=1.0, user-scalable=no”
1.确定布局：结构内部各个内容的大体位置。请熟练使用各种盒元素、块元素、行内元素的属性。
2.确定图层间关系，这一步是为了能够更强化体感关系的包括动态的。请熟练使用各种选择器。
3.填充细节
1.在html中加入viewport
2.在html中处理navigation分块——main-nav&sub-nav
操作步骤
/*这2个列表，之后可以用对li元素设置inline-block属性，再消除inline-block间距来实现横栏的样式。完成这一块的html之后，马上处理它的css*/
.body{
background:black;
padding:15px;
}
header{
background:url(“img”);
}
.main-nav{
Background:black;
}
.sub-nav{
background:black;
}
.util{
background:black;
}
/*技巧：再定大调的过程中，这2个nav，可以先不同背景色区分开来，之后处理样式：用对li元素设置inline-block属性，再消除inline-block 间距来实现横栏。
这是第一步，区分结构，接下来更细一点地继续调整：首先是网格*/
header{
# display：grid;
# grid-template-columns:20% auto 20%;
# grid-template-rows:repeat(2,58px)
.logo{
# grid-row:1/span 2,
/*从第一行开始，横跨2个行*/
# grid-column:1
background:url(“img=”);
}
.main-nav{
# grid-row:1；
# grid-column:2；
background:black;
}
.sub-nav{
# grid-row:2；
# grid-column:2；
background:black;
}
.util{
# grid-row:1；
# grid-column:3；
background:black;
}
/*2）调整display*/
.main-nav{
## display:inline-block；
# grid-row:1；
# grid-column:2；
background:black;
}
.sub-nav{
## display:inline-block；
# grid-row:2；
# grid-column:2；
background:black;
}
.util{
## display:inline-gird；
# grid-template-columns: 60% 20% 20%；
# grid-template-rows:repeat(1,50px)；
# grid-row:1；
# grid-column:3；
background:black;
}
.search-input{
## display:inline-block；
}
.util-img{
## display:inline-block；
}
/*再针对细分的util内部进行大小微调：*/
.util{
## display:inline-gird；
# grid-template-columns: 60% 20% 20%
# grid-template-rows:repeat(1,50px)/*repeat：*/
.search-input{
## display:inline-block；
### width:100%；
### height:100%；}
.util-img{
## display:inline-block；
### width:50px；
}
/*看一下效果；大了一些，因为默认了padding和border，把它们定义为0*/
.search-input{
## display:inline-block；
### width:100%；
### height:100%；
#### border:0；
}
/*接下来再处理细节方面，竖线问题：
因为竖线比字体大小更大，可以main-nav用border-left: solid 2px实现*/
.main-nav li{
# grid-row:1；
# grid-column:2；
Background:black;
}
.main-nav li{
##### border-left:2px solid #a55555；
####height:30px；
## display:inline-block；
}
/*把第一个的左边线去掉*/
.main-nav li:first-child{
##### border-left:0px
}
/*再去除间距：用对li元素设置inline-block属性，再消除inline-block间距来实现横栏的样式。*/
/*再查看效果，发现ul这里特别挤，你第一个想到的就是默认的那些事儿：*/
ul{
###### padding:0 40px；
###### margin:0；
}
/*40px是左右，还是要一点的，后来又去掉了，再微调一下盒子大小*/
.main-nav li{
##### border-left:2px solid #a55555；
##### height:30px；
## display:inline-block；
###### padding:10px；
}
sub-nav和main-nav的处理方法大致一样。*/
/*首先处理竖线并去掉第一个元素*/
.sub-nav li{
##### border-left:solid 1px white；
## display:inline-block；
####### color:white;
background:grey;
}
把第一个的左边线去掉
.sub-nav li:first-child{
##### border-left:0px
####### text-align:center;
}
/*首先处理ul,给ul加个背景，给背景加个外框，竖线可以掉下来了，可以看到margin 的距离会变宽*/
/*再对字体，颜色和间距进行微调*/
.sub-nav li{
##### border-left:solid 1px white；
## display:inline-block；
######## color:white;
######## font-size:13px;
######## margin:18px 0 10px;
######## padding:0 10px;
background:grey;
}
/*再对.util-img一分为二，进行背景图片的设置*/
.search-img{
## display:inline-block；
######## background:url(“”);
######## height:50px;
}
.share-img{
## display:inline-block；
######## background:url(“”);
######## height:50px;
}
/*样式就做好了，接下来做navigation的响应式效果，也即宽度在***以下时候的样式*/
