CSS中,用于控制不同屏幕宽度的代码是 media query。通过设置不同的媒体查询条件,可以针对不同的屏幕宽度应用不同的CSS样式。以下是媒体查询的代码示例: @media screen and
CSS中,用于控制不同屏幕宽度的代码是 media query
。通过设置不同的媒体查询条件,可以针对不同的屏幕宽度应用不同的CSS样式。
以下是媒体查询的代码示例:
@media screen and (max-width: 600px) { /* 当屏幕宽度小于等于600px时应用的CSS样式 */ body { font-size: 14px; } } @media screen and (min-width: 601px) and (max-width: 1200px) { /* 当屏幕宽度在601px到1200px之间时应用的CSS样式 */ body { font-size: 16px; } } @media screen and (min-width: 1201px) { /* 当屏幕宽度大于等于1201px时应用的CSS样式 */ body { font-size: 18px; } }
在上面的示例中,@media
关键字表示这是一个媒体查询,后面跟随的是媒体查询条件,如屏幕宽度、像素密度等。当媒体查询条件匹配时,其中的CSS样式将被应用。
在实际应用中,媒体查询可以应用于不同的CSS属性,如背景、字体、间距等。通过媒体查询,可以实现响应式设计,使网页在不同设备上都能够完美展示。
粉丝
0
关注
0
收藏
0