响应式布局如何用css编写响应式
一个响应式网站离不开CSS响应式布局查询代码编写。在此之前，我们需要了解什么是媒体查询，以及如何将媒体查询引入CSS。
什么是媒体询问？
媒体查询允许我们根据设备显示的特征(如视口宽度、屏幕比例、设备方向:横向或纵向)设置CSS样式。媒体查询由媒体类型和一个或多个检测媒体特征的条件表达式组成。在媒体查询中可以用于检测的媒体特征包括宽度、高度和颜色等。).使用媒体查询，您可以自定义特定输出设备的显示效果，而无需更改页面内容。
如何在CSS中引入媒体查询？
媒体查询写在CSS样式代码的末尾。CSS是一个级联样式表。同样的特殊性下，后面的款式会和前面的款式重叠。
如何用CSS做出响应式布局？
1.在HTML头中添加以下代码，以显示兼容移动设备的显示效果。
& ltmeta name = & quot视窗& quotcontent = & quotwidth =设备宽度，initial-scale=1，minimum-scale=1，maximum-scale=1，user-scalable = no & quot；/& gt；
参数的详细说明:
Width=device-width:宽度等于当前设备的宽度。
Initial-scale=1:初始缩放比例(默认为1)
Minimum-scale=1:允许用户缩放的最小比例(默认值为1)
Maximum-scale=1:允许用户缩放的最大比例(默认值为1)
User-scalable=no:用户是否可以手动缩放(默认值为no)
2.介绍包含媒体的CSS文件
一般HTMLCSS代码都是单独编写的，Media也不例外。
& ltlink rel = & quot样式表& quottype = & quottext/CSS & quot；href = & quotm320.css & quotmedia = & quot仅屏幕和(最大宽度:320像素)& quot/& gt；
& ltlink rel = & quot样式表& quottype = & quottext/CSS & quot；href = & quotm480.css & quotmedia = & quot仅屏幕和(最小宽度:321像素)和(最大宽度:375像素)& quot/& gt；
3.在介质中编写代码
以网页的响应式布局为例。
结构:@媒体设备类型和(设备特征){样式代码}
/*媒体查询*/
/*页面大于1200px时，大屏幕，主要是PC端*/
@media(最小宽度:1200像素){
}
/*在992和1199像素之间的屏幕上，中等屏幕，PC*/低分辨率*/
@media(最小宽度:992像素)和(最大宽度:1199像素){
#adver。居中{
宽度:50%；
保证金:-10px 0 0-25%；
}
主要的。中心h2 {
字体大小:40px
}
}
/*屏幕在768到991像素之间，小屏幕，主要是PAD*/
@media(最小宽度:768像素)和(最大宽度:991像素){
#adver。居中{
宽度:60%；
保证金:-10px 0 0-30%；
}
#adver。搜索，#广告。按钮{
字体大小:20px
}
主要的。中心h2 {
字体大小:35px
}
}
/*屏幕在480到767像素之间，超小屏幕，主要是手机*/
@media(最小宽度:480像素)和(最大宽度:767像素){
头，头。中心，标题。链接{
高度:45px
}
标题。logo，。sm-隐藏，。侧边栏，。MD-隐藏{
显示:无；
}
标题。链接{
宽度:100%；
行高:45px
}
#adver {
填充:45px 0 0
}
#adver。居中{
宽度:70%；
高度:53px
保证金:-10px 0 0-35%；
}
#adver。搜索，#广告。按钮{
高度:45px
字体大小:18px
}
.sm-可见{
显示:块；
}
主要的。中心h2 {
字体大小:30px
}
主要的。中心p {
字号:15px
}
主要数字{
宽度:49.2%；
}
}
/*在小于480像素的屏幕、小屏幕、低分辨率手机上*/
@media(最大宽度:479像素){
头，头。中心，标题。链接{
高度:45px
}
标题。logo，。xs-隐藏，。sm-隐藏，。侧边栏，。MD-隐藏{
显示:无；
}
标题。链接{
宽度:100%；
行高:45px
}
标题。链接李{
宽度:25%；
}
#adver {
填充:45px 0 0
}
#adver。居中{
宽度:80%；
高度:48px
保证金:-10px 0 0-40%；
}
#adver。搜索，#广告。按钮{
高度:40px
字体大小:16px
}
.sm-可见{
显示:块；
}
页脚。底部，页脚。版本{
字体大小:13px
}
主要的。中心h2 {
字体大小:26px
}
主要的。中心p {
字体大小:14px
}
主要数字{
宽度:99%；
}
}
响应式布局的原理是在不同的窗口大小中显示不同的结构和风格。只要掌握了CSS的风格，响应式布局就没问题。