Question

如您所知，每天都会推出具有不同分辨率的新智能手机和平板电脑！然后，如果我想根据宽度制作模板，它将失败。例如，有一个华硕平板电脑，横向宽度为1280像素，我的笔记本电脑也是1280像素！然后我不能使用宽度。

有没有办法根据设备英寸响应模板？

我读了this article并且无法弄清楚我怎样才能将设备PPI和设备最大宽度匹配到设备英寸（如果可能的话）。我需要一个过滤器来让我的模板永远响应，因为我知道平板电脑总是小于笔记本电脑的英寸！

Answer 1

您需要使用CSS媒体查询来检测正在使用的设备的res，然后为每个设备应用样式：

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

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

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

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

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

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 2

如果您使用

width: 1in;

您应该能够获得特定的基于英寸的度量。例如：

<head>
<style>
.box {
        display: block;
        width: 1in;
        background-color: blue;
}
.bix {
        display: block;
        width: 2in;
        background-color: blue;
}
</style>
</head>
<body>
<span class='box'>Hi</span>
<span class='bix'>Hi</span>
</body>

将创建宽度分别约为1英寸和2英寸的蓝色方框。

Answer 3

你有没有试过@media only screen（max-device-width：11in）想到这应该适用于Apple和Windows设备，不确定Android。

如何使模板始终响应？

3 个答案: