响应式
响应式网页设计是一种解决问题的途径，它建议设计和开发应该根据用户行为和环境（基于屏幕大小，平台和方向）进行响应，这种实践由灵活的网格和布局、图片和CSS媒体查询的智能使用所构成。当用户从他们的便携式电脑切换到iPad的时候，网站应该自动切换合适的分辨率，图片尺寸和脚本能力。换句话说，网站应该能够自动响应用户的设备参数。这样就没必要对市场上每一种设备都要进行不同的设计和开发。
解决方案
0 根据屏幕分辨率调整样式
相关工具：viewport、@media媒体查询、利用JavaScript在不同的样式表间切换，重新排放使之适应不同的窗口宽度。
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主页在两种窗口宽度下的页面显示状态：
设备尺寸小于1101px
设备尺寸大于1101px
1 整理现有内容
1.1 初始设置
1.1.1 在html中调用fonts.googleapis.com字体
1.1.2 在html中加入viewport
因为我们要用响应式，所以一开始先在html中加入viewport 声明：meta name=“viewport”content=“width=device-width,initial-scale=1.0, minimum-scale=1.0, user-scalable=no”
1.1.3 全局样式设置
html、body、header的background、盒内参数
1.2 分区处理页面
整体页面大致可以分为navigation、main、footer三大块，下面以navigation为例，处理navigation的分块。
1.2.1 图层间关系
这一步是为了区分结构
技巧：再定大调的过程中，这2个nav，可以先不同背景色区分开来，之后处理样式：
1.2.2 确定布局：
layout
grid就是为排版而生的，这里使用grid。
然后调整网格：
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;
}
1.2.2 确定各个元素display属性
区分容器中的块元素/行内元素
/*调整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；
}
1.2.3 细化盒内参数（content）
.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；
}
1.2.4 细化盒内参数（padding、border、margin）
/*可以在devtool里看一下效果；对于微调，你第一个想到的就是默认的那些事儿。因为浏览器经常会默认padding和border，这时需要把它们定义为0*/
.search-input{
## display:inline-block；
### width:100%；
### height:100%；
#### border:0；
}
1.2.5 处理细节
/*接下来是细节，首先处理竖线问题：因为竖线比字体大小更大，可以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间距来实现横栏的样式。*/
/*再对字体，颜色和间距进行微调*/
.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;
}
2 实现响应式
宽度在1101px以上的样式就做好了，接下来做宽度在1101px以下时候的样式，然后设置样式发生变化的触发条件，就达到了响应式的效果。
网友评论