网页根据屏幕大小来加载css文件,在手机上可以完美加载指定的css,但是在电脑上就加载不了指定的css?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页根据屏幕大小来加载css文件,在手机上可以完美加载指定的css,但是在电脑上就加载不了指定的css?相关的知识,希望对你有一定的参考价值。

‍求高手帮忙看下是怎么回事啊,弄了好几天了,都不成功,我的头部代码是

<title>2/3以上业主同意 老住宅楼可申请加装电梯_房产</title>
<meta name="keywords" content="2/3以上业主同意 老住宅楼可申请加装电梯,加装电梯,产权人自筹,办法">
<meta name="Description" content="2/3以上业主同意 老住宅楼可申请加装电梯">

<link rel="alternate" type="application/vnd.wap.xhtml+xml" media="handheld" href="http://shipei.qq.com/c/nj_house/20130711000005">

<meta name="viewport" content="width=device-width, initial-scale=1" />

<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>

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

网页根据屏幕大小来加载指定的样式,屏幕宽度小于900就加载wap.css,大于900就加载dcy.css,我这边写出来的效果在手机上完美实现,但是在电脑上页面就乱了啊,完全没有加载到dcy.css样式表,怎么回事啊,求高手指点迷津啊!鄙人一共就60分,全给了,谢谢!
我发现了,在电脑上360,IE,TT浏览器加载不到dcy.css样式表,在火狐和搜狗下,可以加载到dcy.css,求高手指点迷津,这个兼容怎么来写?

参考技术A css文件中:

@media (max-width: 900px)
/* 这里面写css样式 */


@media (min-width: 900px)
/* 这里面写css样式 */
追问

是写在同一个css里面是吗?我试试

不行啊,我试过了,这下在电脑上面所有浏览器加载不到样式表

追答

这个样式是不支持ie内核的浏览器的······

根据img大小而不是屏幕大小使用HTML5或CSS3加载不同的图像[重复]

【中文标题】根据img大小而不是屏幕大小使用HTML5或CSS3加载不同的图像[重复]【英文标题】:Load different images with HTML5 or CSS3 based on img size not screen size [duplicate] 【发布时间】:2017-07-10 01:45:21 【问题描述】:

我想根据img 元素大小而不是屏幕/视口大小在网页上加载图像。

例如,我有两个图像,例如分辨率为 100 像素的 res-100px.png 和分辨率为 200 像素的res-200px.png

如果img宽度小于等于100px,加载res-100px.png图片。如果img宽度大于100px加载res-200px.png图片。

希望你能理解我的想法。

那么,有没有可能只用 HTML5 和 CSS3 而没有 JS 来解决这个问题。如果可能,请提供一些例子。

提前致谢:)

【问题讨论】:

也许添加相关代码,包括html和css,告诉我们你使用一些框架吗?不是 100% 清楚你想做什么。 @skobaljic 例如参见 Akxe 答案。根据视口大小加载图像。我想加载基于 img 元素大小的图像。 【参考方案1】:

有一个专门针对这种情况的元素。见picture

​<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <!-- Load SVG preferrably -->

 <source srcset="large.jpg  1024w,
     medium.jpg 640w,
     small.jpg  320w" sizes="33.3vw">
 <!-- Load image for size(s) -->


 <source srcset="logo-big.png" media="(min-width: 600px)">
 <source srcset="logo-small.png" media="(max-width: 600px)">
 <!-- Load image for size(s) -->

 <img src="mdn-logo.jpg" >
 <!-- Display fallback image (not it will probably be IE9 so you can include thebig variant) -->
</picture>

它可以检测一种类型是否可显示,例如您的图像是否可以被视为 SVG,或者它可以根据显示大小进行切换。它也有很好的 img 形式的后备,不会被较新的浏览器呈现。

【讨论】:

请参阅 media="(min-width: 600px)" 您的示例。它基于视口加载图像。 在问题标题中清楚地写着based on image size not screen size 除此之外,您将不得不使用 JS,这是我所知道的最敏感的事情。 SVG 有该选项,但如果您的图像是光栅图像,而不是矢量图像,它也不是您的选择。 srcset 是最好的 HTML5 方式,它会告诉浏览器,什么图像是什么大小,它会根据自己的喜好进行选择。【参考方案2】:

好吧,您可以尝试 Jquery 来获取每个图像的宽度并根据您想要的条件添加一个类,然后只需附加一个图像或任何您需要的...

 $('img').addClass(function() 
    if ( this.height > 200 ) 
       return 'show-res-200px';
     else 
       return 'show-res-100px';
    
);

查看JsFiddle

【讨论】:

以上是关于网页根据屏幕大小来加载css文件,在手机上可以完美加载指定的css,但是在电脑上就加载不了指定的css?的主要内容,如果未能解决你的问题,请参考以下文章

分针网—每日分享: 根据屏幕大小,加载不同大小的图片

如何在手机上查看html、css、js、PHP文件代码?

手机网页大小怎么调整

根据img大小而不是屏幕大小使用HTML5或CSS3加载不同的图像[重复]

我用HTML5做手机网页,如何设置字体大小以适合各种设备?

根据屏幕大小更改 CSS