css教程

@media自适应不同分辨率

我的站长站 2020-09-18 人阅读

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

@media自适应不同分辨率

下面我的站长站分享一套自用的@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%的宽度,这些都是自适应中常用的写法。

相关推荐
  • @media
  • 全套@media响应式布局代码方案分享

    // 320@media screen and (min-width: 320px) { html { font-size: 15px; }}// 360@media screen and (min-width: 360px) { html { font-size:15px; }}// 375 iphone 678@media screen and (min-width: 375px) { html...

    css教程 24 1年前
  • @keyframes实现CSS动画帧效果

    本教程教大家如何使用@keyframes,制作一个类似幻灯片的CSS动画效果。首先我们准备一张连贯的动作图片,这里以这张熊跑路为例。新建一个DIV容器,放这里一帧图片<div></div>DIV的盒子属性div { position: absolute; width: 200px; ...

    css教程 80 2年前
  • 分享自用的CSS自适应写法

    在写CSS前,需要在页面上<head>内加上如下代码,<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />禁止页面缩放,如果自动缩放了就不能触发CSS自适应代码了。然后是自用的CSS自适应代码,大...

    css教程 83 3年前
最新更新