响应式是指:在不同宽度的屏幕下,都可以看到完整的页面内容,只不过,在宽度较小的屏幕下,可能内容会有删减,布局可能会有些改变等。响应式一般会使用 CSS3 媒体查询 @media 来实现。(PC端响应式多定义了几次CSS样式,然后在不同宽度的屏幕下显示出来,覆盖之前的CSS样式。)
如下:
.box{
width: 1024px;
height:40px;
background:red;
margin:0 auto;
}
@media screen and (max-width:1023px){ /*当屏幕小于1000px时执行*/
.box{
width: 100%;
padding:0 25px;
box-sizing:border-box;
}
}
@media screen and (max-width:700px){ /*当屏幕小于700px时执行*/
.box{
padding:0 15px;
}
}
【个人见解】