租号玩代理申请
A-A+

根据屏幕分辨率加载不同CSS内容显示不同内容的简单方法

2024年05月03日 建站相关 暂无评论 阅读 113 次

本站手机访问的时候一直显示不了搜索框,今天早上起来的比较早,解决一下这个问题,代码改好了,但不想让电脑端显示,百度了一下CSS代码,在此记录一下,避免忘记。

要根据屏幕分辨率显示不同的CSS内容,可以使用媒体查询(Media Queries)在CSS中定义不同的样式规则,这些规则会根据屏幕宽度和高度自动应用。

下面是一个简单的例子,演示了如何使用CSS媒体查询来根据屏幕分辨率改变背景颜色:

/* 默认样式 */
body {
  background-color: blue;
}
 
/* 当屏幕宽度小于或等于768像素时 */
@media screen and (max-width: 768px) {
  body {
    background-color: red;
  }
}
 
/* 当屏幕宽度在600像素到768像素之间时 */
@media screen and (min-width: 600px) and (max-width: 768px) {
  body {
    background-color: green;
  }
}

在这个例子中,默认情况下背景颜色是蓝色的,当屏幕宽度减小到768像素或以下时背景颜色变成红色,在600像素到768像素之间时背景颜色变成绿色。当屏幕分辨率超过768像素时,将应用默认的蓝色背景样式。

上面是限制屏幕最大宽度的CSS,如果限制屏幕最小宽度值:

/* 当屏幕宽度大于或等于768像素时 */
@media screen and (min-width: 768px) {
  body {
    background-color: red;
  }
}

这样就可以了。

-----更多解释------
简单理解为可视区域最小宽度为900px,即大于900px下生效。

@media screen and (min-width: 900px) {

.class {

background: #fff;

}

}

总结为:如果对min 就是如果宽度在大于min的值时生效, max 如果宽度小于max的值时生效。

直接在link中判断设备的尺寸,然后引用不同的css文件:

@media #### and (min-width: 900px) 

####的值解释:

all——用于所有多媒体设备

print——用于打印机

screen——用于电脑、平板、智能手机等

speech——用于屏幕阅读器

**not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。

only: 用来定某种特别的媒体类型。

仅电脑设备中的页面最大可见区域宽度为 1068px 时

显示其定义的样式。

@media only screen and (max-width: 1068px)

all: 所有设备,这个应该经常看到。**

@media screen and (min-width: 1200px) { css-code; }

@media screen and(min-width: 960px) and (max-width: 1199px) { css-code; }

@media screen and(min-width: 768px) and (max-width: 959px) { css-code; }

@media screen and(min-width: 480px) and (max-width: 767px) { css-code; }

@media screen and (max-width: 479px) { css-code; }

只写max-width的话由大像素写到小像素,min-width按小像素到大像素的顺序

京东空调大促销