响应式设计：根据不同设备引不同css样式

2024-09-14 01:30:50 219人阅读

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

body{
    background-color: #fff;
}
@media screen and (max-width: 600px) {
     body{
         background-color: #ccc;
     }
 }

上面表示的是：当屏幕小于或等于600px时，背景色显示成灰色。

body{
    background-color: #fff;
}
@media screen and (min-width: 900px) {
     body{
         background-color: #ccc;
     }
 }

上面表示的是：当屏幕大于或等于900px时，背景色显示成灰色。

响应式设计：根据不同设备引不同css样式

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们