Question

嗨，我有一张名为id =＆＃34; design＆＃34;比例为：5500px X 3800px。

我希望将设计和全屏设置在我的计算机或手机浏览器上，并向任意方向滚动以查看整个设计。我应该用Javascript完成这项工作吗？感谢

Answer 1

将我在此处写下的所有代码添加到css文件中然后将它链接到您想要响应的网站html .. ：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /*StyleHere{}*/

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {  
/*StyleHere{}*/
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/*StyleHere{}*/
 }

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {  
/*StyleHere{}*/
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {  
/*StyleHere{}*/
 }


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){
/*StyleHere{}*/
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {  
/*StyleHere{}*/
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { 
/*StyleHere{}*/
 }

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  { 
/*StyleHere{}*/
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {  
/*StyleHere{}*/
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  { 
/*StyleHere{}*/
 }

Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)

Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)

Device-pixel-ratio: 1

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {  
/*StyleHere{}*/
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
/*StyleHere{}*/
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 
/*StyleHere{}*/
 }

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {  
/*StyleHere{}*/
}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
/*StyleHere{}*/
}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 
/*StyleHere{}*/
 }

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {  
/*StyleHere{}*/
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/*StyleHere{}*/
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {  
/*StyleHere{}*/
 }


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/*StyleHere{}*/
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 
/*StyleHere{}*/
}

@media only screen /*iphone5*/
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { 
/*StyleHere{}*/
}



@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 
/*StyleHere{}*/
}

@media only screen and (min-device-width : 604px) and (max-device-width : 966px) and (orientation : portrait) {
/*StyleHere{}*/
}


/* Google Nexus 7 2 (portrait and landscape) */
@media only screen and (min-device-width : 600px) and (max-device-width : 960px) {
/*StyleHere{}*/
}

@media only screen and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-device-pixel-ratio: 1.5) {
/*StyleHere{}*/
}

@media only screen and (min-device-width: 1200px)
    and (max-device-width: 1920px)
    and (-webkit-device-pixel-ratio: 1.5) {
/*StyleHere{}*/
}


@media only screen and (min-device-width: 1600px)
    and (max-device-width: 2560px)
    and (-webkit-device-pixel-ratio: 1.5) {
    /*StyleHere{}*/
}

Answer 2

我最近看到一个可以帮到你很多的图书馆。它叫做Intense-Images。

github项目在这里：https://github.com/tholman/intense-images

使用一些大图片的演示在这里：http://www.jqueryrain.com/?51_0C5cn

Html：

<img src="./img/awesome-source.jpg" class="intense" data-title="My beach adventure" data-caption="Thanks Sam, for the great picture"/>

Js :(包括intense.js和jQuery）

window.onload = function() {
    // Intensify all images with the 'intense' classname.
    var elements = document.querySelectorAll( '.intense' );
    Intense( elements );
}

还有一些css：

.intense {
    cursor: url('./you-image-directory/plus_cursor.png') 25 25, auto;
}

请注意，您无法向所有方向滚动，但未来可能会有一些与之相关的工作：https://github.com/tholman/intense-images/issues/31

希望对你的开始有所帮助。当然，你总是可以扩展插件来实现这一点。

向任意方向滚动特定大小的图像

2 个答案: