@media自适应不同分辨率

@media是CSS中媒介语法，可以根据不同分辨率，执行不同的CSS样式，可以达到自适应不同分辨率终端的方法。

下面我的站长站分享一套自用的@media方法，已经应用了很多套模板，100%好用。

@media使用方法

在使用@media之前，需要在页面中头部加上这段代码

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

强制页面不要根据浏览器大小自动缩放。

下面是我的站长站自用的@media方法，复制下面这段代码到您的CSS尾部去。

@media only screen and (max-width: 1366px) {
.css{
width:100% !important;
box-sizing: border-box;
}
.css{
display:none !important;
}
.css{
padding-left:1%;
padding-right:1%;
}
.css{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.css{
width:48%;
float:left;
margin:0px 1%;
}
}
@media only screen and (min-width: 767px) and (max-width: 1000px){
.css{
width:100% !important;
box-sizing: border-box;
}
.css{
display:none !important;
}
.css{
padding-left:1%;
padding-right:1%;
}
.css{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.css{
width:48%;
float:left;
margin:0px 1%;
}
}
@media only screen and (max-width: 479px) {
.css{
width:100% !important;
box-sizing: border-box;
}
.css{
display:none !important;
}
.css{
padding-left:0.5%;
padding-right:0.5%;
}
.css{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.css{
width:98%;
float:left;
margin:0px 1%;
}
}

@media说明

现在的用户分辨率基本都集中在大于1366的宽屏分辨率，等于1366的笔记本分辨率，小于1366大于767的平板，和最后的小于479的手机端中，所以我的站长站分享的这套@media方法方法只处理了这4个分辨率，除此之外的分辨率基本都很少有人使用。

你们只需要按项目实际情况修改或添加.CSS样式名就可以，其实第一段是让宽度强制100%，第二段是隐藏，第三段是左右边距，第四代是文字超出长度省略号，第五段是50%的宽度，这些都是自适应中常用的写法。

上一篇：CSS3+JS页面loading过度跳转效果 下一篇：CSS自定义变量方法 栏目分类

帝国CMS教程

织梦cms教程

discuz教程

ecshop教程

phpcms教程

wordpress教程

苹果cms教程

php教程

数据库教程

微信小程序教程

python教程

css教程

js教程

视频教程

电子书

热门推荐

• 01 IE不显示加载iconfont阿里巴巴图标的解决方法 377热度
• 02 CSS文字超出省略号显示 318热度
• 03 分享IE6 PNG 透明的几种方法 244热度
• 04 为什么bootstrap国内很少人使用 241热度
• 05 CSS定位控制上下左右坐标教程 210热度