Question

我正在编写响应式网站，目前我已经完成了2个css文件scree_style.css和screen_layout_medium.css我已经为下面提到的中型屏幕编写了部分css

这是我如何联系他们

<link rel="stylesheet" type="text/css" href="css/screen_styles.css"  />
<link rel="stylesheet" type="text/css"  @media="only screen and(min-width:501px) and (max-width: 800px)" href="css/screen_layout_medium.css"  />

现在我为screen_layout_medium.css编写了标题部分的css后，即使我的浏览器是全宽的，也会加载为默认布局。

用于screen_layout_medium.css的标题部分的css

header { height:200px; background:url(images/banner_medium.jpg) no-repeat 90% 0px;}
header a.logo { width:115px; height:70px; top:20px;right:20px;background:url(images/logo_medium.png) ; }

默认css的样式

 header  { height:275px ; background:url(images/banner_large.jpg) no-repeat right 0px;}
 header a.logo {width:150px ; height:85px ; top:28px; right:30px; background:url(images/logo_large.png) no-repeat ; }

是什么原因是它没有加载scree_style.css作为默认布局请帮助我。

Answer 1

在第二个@中移除media之前的<link>，并在and括号之间添加空格：

<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width: 800px)" href="css/screen_layout_medium.css"  />

示例（调整右列以查看其是否有效）：http://jsfiddle.net/4gP4M/

响应式设计加载（最大宽度：800px）作为默认布局

1 个答案: