如何为具有相同分辨率的不同设备提供相同网址的不同视图？ [英] How to give different views for same url for different devices with same resolution?

问题描述

在提及响应式网页设计概念并将其用于任何ASP.NET项目时。

我在Google Developers文章中发现：



我们建议用于智能手机的CSS媒体查询是：

While referring to concept ‘Responsive Web Design’ and using it for any ASP.NET project.
I found in Google Developers article as:

A CSS media query we recommend to use for smartphones is:

@media only screen and (max-width: 640px) {...}

现在，iPad的分辨率为1024x768，Lumia 920的分辨率为1280x768，类似于PC屏幕分辨率。如何使用媒体标签在浏览器中提供不同的视图（即一个用于PC，一个用于iPad，一个用于Lumia 920）？



我不想要单独的移动设备网址。我只想通过使用CSS将所有内容合二为一。如何实现？

Now, iPad is having resolution of 1024x768 and Lumia 920 with resolution of 1280x768 similar to a PC screen resolution. How can I give different views in browser using media tag (i.e. one for PC and one for iPad and one for Lumia 920)?

I don’t want separate mobile URLs. I just want to have all in one just by making use of CSS. How can this be achieved?

推荐答案

是的，你可以使用CSS媒体查询，然后浏览器根据屏幕大小使用css类。

例如：



HTML：

Yes, you can use CSS media query, then browser use the css class based on the screen size.
Example:

HTML:

<div class="style1">
    Hi, this is a test.
    </div>

CSS：

CSS:

.style1
{
    border: 4px solid green;
    width:100%
}
@media screen and (max-width: 680px) {

	.style1
	{
	    border: 4px solid gray;
	}
}
@media screen and (max-width: 400px) {

	.style1
	{
	    border: 4px solid blue;
	}
}

在这里你看到第一个css类是一般的（媒体屏幕块之外） 。其他2个类别的媒体大小不同。你看我为每个媒体屏幕块提到了max-width。这意味着如果屏幕尺寸<= 400px，那么它将使用来自第一媒体屏幕块的css类，但是如果屏幕尺寸是> 400px和< = 680px然后它将使用来自第二媒体屏幕块的css类。

Here you see 1st css class is a general one (outside of media screen blocks). And other 2 classes are under different media size. you see I have mentioned "max-width" for each media screen block. That means if screen size is <=400px then it will use the css class from 1st media screen block, but if screen size is > 400px and <=680px then it will use the css class from 2nd media screen block.

这篇关于如何为具有相同分辨率的不同设备提供相同网址的不同视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！