大佬教程收集整理的这篇文章主要介绍了html – 如何根据窗口宽度加载不同的css文件：较小的大小无法识别，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<link type="text/css" media='(max-width: 500pX)' rel="stylesheet" href="/static/mobile.css" /> <link type="text/css" media='(min-width: 500pX)' rel='stylesheet' href='/static/main.css' />
但是main.css总是覆盖mobile.css,尽管窗口小于500px.怎么了？
编辑：
我改成了
<link type="text/css" rel="stylesheet" href="/static/main.css" /> <link type="text/css" media="(max-width: 500pX)" rel="stylesheet" href="/static/mobile.css" />
但是当我将窗口缩小到小于500px时,元素检查器会显示正在加载mobile.css,但是每个元素都被main.css中的规范覆盖.
<link href="themes/default/priMary.css" rel="stylesheet" type="text/css" /> <link href="themes/default/secondary.css" rel="stylesheet" type="text/css" /> <link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
如果辅助节点中的规则与主节点中的规则匹配,则因为Secondary.css文件在priMary.css之后级联,则它优先.与tertiary.css文件及其规则相同,它将取代secondary.css文件的规则.
现在应用你的问题……
获取所有主要CSS文件,然后添加特定于屏幕的CSS文件…
<head> <link href="themes/default/priMary.css" rel="stylesheet" type="text/css" /> <link href="themes/default/secondary.css" rel="stylesheet" type="text/css" /> <link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" /> <link href="/static/mobile.css" media="(max-width: 500pX)" rel="stylesheet" type="text/css" /> <link href="/static/main.css" media="(min-width: 500pX)" rel="stylesheet" type="text/css" /> </head>
还要尽量保持HTML属性按字母顺序排列,如果你进展得足够远,你会发现这样的小花絮会为你节省很多麻烦并坚持使用双引号来表示元素属性.
那当然回答了这个问题,尽管如果你要对CSS文件进行http请求,你真正应该做的是最小化你的http请求.无论在CSS本身内部,您应该使用媒体查询.
@H_638_2@main {margin: 4%;} section {Border-width: 10px;} @media (max-width: 1024pX) { main {margin: 4px;} section {Border-width: 2px;} }始终首先在最高分辨率下测试您的代码;我理所当然地忽略了“移动优先”的心态：我理解CSS应该如何编写.您的媒体查询应位于底部,以便针对同一网站的平板电脑和(移动)电话视图进行调整.请考虑以下代码：
CSS
div {Border: #000 solid 2px; float: left; width: 96px;}
HTML
<section> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> <div>Example</div> </section>
…当您调整浏览器大小时,此示例中的div元素将简单地开始向下推到第二行,并且您将浏览器窗口的大小调整为更小.平板电脑和移动设备只是真正减少了窗口大小.我强烈建议您使用Chris Pederick’s Web Developer Toolbar上的调整大小工具.
以上是大佬教程为你收集整理的html – 如何根据窗口宽度加载不同的css文件：较小的大小无法识别全部内容，希望文章能够帮你解决html – 如何根据窗口宽度加载不同的css文件：较小的大小无法识别所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。