编程技术网

关注微信公众号,定时推送前沿、专业、深度的编程技术资料。

 找回密码
 立即注册

QQ登录

只需一步,快速开始

极客时间

如何根据窗口宽度加载不同的 css 文件:无法识别较小的尺寸:How to load different css file depending on window width: smaller size not recognized

winnietsang 人工智能 2022-5-7 11:19 10人围观

腾讯云服务器

这当然回答了这个问题,尽管您真正应该做的是最小化您的 HTTP 请求如果您将要对 CSS 文件发出 HTTP 请求.无论在 CSS 本身内,您应该在何处使用媒体查询.

main {margin: 4%;}部分 {border-width: 10px;}@media(最大宽度:1024px){主要{边距:4px;}部分{边框宽度:2px;}}

始终以最高分辨率第一测试您的代码;我有充分的理由忽略移动优先"的心态:我理解CSS应该是如何编写的.您的媒体查询应该位于底部,以便针对同一网站的平板电脑和(移动)手机浏览量进行调整.考虑以下代码:

CSS

div {border: #000 solid 2px;向左飘浮;宽度:96px;}

HTML


 
<div>示例</div><div>示例</div><div>示例</div><div>示例</div><div>示例</div><div>示例</div><div>示例</div><div>示例</div><div>示例</div><div>示例</div></节>

...当您调整浏览器大小时,此示例中的 div 元素将开始被向下推到第二行,并且您将浏览器窗口调整为更小.平板电脑和移动设备只是真正缩小了窗口大小.我强烈推荐在

I want to load a different css file if the window size is below 500px. I have

<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' />

But the main.css always overrides the mobile.css despite the window being less than 500px. What's wrong?

EDIT: I changed it to

<link type="text/css" rel="stylesheet" href="/static/main.css" />
<link type="text/css" media="(max-width: 500px)" rel="stylesheet" href="/static/mobile.css" />

But when I shrink the window to less than 500px, the element inspector shows that the mobile.css is being loaded, but every element is being overridden by specifications from main.css.

解决方案

CSS stands for CASCADING STYLE SHEETS which means you should always have your main stylesheet at the top and then secondary style sheets below it. The more certain you want to use the CSS in a file over the others the further down/after the other CSS files it should be.

<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" />

If rules in the secondary match the rules in the primary then because the secondary.css file cascades after the primary.css then it takes precedence. The same with the tertiary.css file and it's rules, it will supersede the rules of the secondary.css file.

Now apply your problem...

Take all the main CSS files and then add the screen-specific CSS files...

<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>

Also try to keep your HTML attributes alphabetical, if you advance far along enough you'll find small tidbits like that will save you a lot of hassle and stick to double-quotes for element attributes.


That of course answers the question though what you really should be doing is minimizing your HTTP requests if you're going to have an HTTP request for a CSS file that is. Regardless within the CSS itself is where you should use media queries.

main {margin: 4%;}
section {border-width: 10px;}
@media (max-width: 1024px)
{
 main {margin: 4px;}
 section {border-width: 2px;}
}

Always test your code on the highest resolutions first; I ignore the "mobile first" mentality for good reason: I understand how CSS is supposed be to written. Your media queries should be towards the bottom to adjust for the tablet and (mobile) phone views of the same website. Consider the following code:

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>

...as you resize your browser the div elements in this example would simply start being pushed down to the second row and you resized your browser window to be smaller. A tablet and mobile device are just really reduced window sizes. I highly recommend using the Resize tool on Chris Pederick's Web Developer Toolbar.

这篇关于如何根据窗口宽度加载不同的 css 文件:无法识别较小的尺寸的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程技术网(www.editcode.net)!

腾讯云服务器

相关推荐

阿里云服务器
关注微信
^