如何在css中指定不同的图像，具体取决于用户在桌面或移动浏览器上访问 [英] how to specify a different image in css depending if the user visits on a desktop or a mobile browser

问题描述

关于移动设备的CSS问题，

我的网站上有一个1260像素宽的图片，当我在手机上看到它时，网站的其余部分是基于960px布局。

我已经使这些图像现在是960px宽的移动设备，但如何指定在CSS如果是移动使用移动优化的图片，而不是常规网站上的图片。

因此，基本上如果用户在桌面计算机上访问网站， 1260像素图像

，如果他们在移动设备上访问该网站，则会显示960像素的图片

解决方案

我不知道你想要JS，我决定回答你的问题，如果你想CSS3， / p>

HTML：

 < img src =image.jpg 
 data-src-960px =image-960px.jpg
 data-src-1260px =image-1260px.jpg
 alt => 
  

CSS：

 code> @media（min-device-width：320px）{
 img [data-src-960px] {
 content：attr（data-src-960px，url）; 
} 
} 
 
 @media（min-device-width：960px）{
 img [data-src-1260px] {
 content：attr （data-src-1260px，url）; 
} 
} 
  

jQuery版本：

  $（document）.ready（function（）{
 
 function imageresize（）{
 var contentwidth = #content'）。width（）; 
 if（（contentwidth）<'960'）{
 $（'imageclass'）。attr（'src'，'image-960px.jpg' ）; 
} else {
 $（'。imageclass'）。attr（'src'，'image-1260px.jpg'）; 
} 
} 
 
 imageresize（）; //文档首次加载时激活
 
 $（window）.bind（resize，function（）{
 imageresize（）; 
 }）; 
 
}）; 
  

Just a question about css for mobile devices,

i have an image that is 1260px wide on my website and when i look at it on the phone it destorts the website as the rest of the website is based on a 960px layout.

I have made these images to be now 960px wide for the mobile device but how do i specify in css that if it is a mobile use mobile optimized image instead of the one on the regular website.

So basically if a user goes on the website on a desktop computer it will show the 1260px image

and if they visit the website on a mobile it will display the 960px image

any ideas guys?

解决方案

Im not sure if you want JS, i decided to answer your question if you want CSS3, try this:

HTML:

<img src="image.jpg"
     data-src-960px="image-960px.jpg"
     data-src-1260px="image-1260px.jpg"
     alt="">

CSS:

 @media (min-device-width:320px) {
        img[data-src-960px] {
            content: attr(data-src-960px, url);
        }
    }

    @media (min-device-width:960px) {
        img[data-src-1260px] {
            content: attr(data-src-1260px, url);
        }
    }

jQuery version:

 $(document).ready(function() {

 function imageresize() {
 var contentwidth = $('#content').width();
 if ((contentwidth) < '960'){
 $('.imageclass').attr('src','image-960px.jpg');
 } else {
 $('.imageclass').attr('src','image-1260px.jpg');
 }
 }

 imageresize();//Activates when document first loads    

 $(window).bind("resize", function(){
 imageresize();
 });

 });

这篇关于如何在css中指定不同的图像，具体取决于用户在桌面或移动浏览器上访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！