.容器未响应iPad的媒体查询
我对此做了大量的研究,但没有成功地弄明白这一点。我正在使用响应网格的lessframework.css处理一个响应站点。它没有正确捕捉到768px和1024px之间的任何平板电脑大小。当我以该屏幕大小检查元素时,.container似乎没有在这些尺寸之间调整大小。然而,我在css中看不到任何地方将其指定为特定的px大小,因此覆盖了它。我从以前的一位开发人员那里学到了这个项目,而且我对响应性代码是新手。任何可以给予的帮助都将是巨大的帮助。谢谢大家! 网站是www.mereo.co 以下是lessframework.css网格中的代码示例:.容器未响应iPad的媒体查询,ipad,css,responsive-design,media-queries,containers,Ipad,Css,Responsive Design,Media Queries,Containers,我对此做了大量的研究,但没有成功地弄明白这一点。我正在使用响应网格的lessframework.css处理一个响应站点。它没有正确捕捉到768px和1024px之间的任何平板电脑大小。当我以该屏幕大小检查元素时,.container似乎没有在这些尺寸之间调整大小。然而,我在css中看不到任何地方将其指定为特定的px大小,因此覆盖了它。我从以前的一位开发人员那里学到了这个项目,而且我对响应性代码是新手。任何可以给予的帮助都将是巨大的帮助。谢谢大家! 网站是www.mereo.co 以下是lessf
/* Default 8-column layout
60 px columns, 24 px gutters, 60 px margins, 768 px total
---------------------------------------------------------
1 2 3 4 5 6 7 8
60px 144px 228px 312px 396px 480px 564px 648px */
/* 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 */
}
#if-logged-in {
position: relative;
width: 100%;
height: 24px;
line-height: 24px;
background: #000;
color: #aaa;
font-size: 10px;
z-index: 1000;
}
#if-logged-in .container {
padding-top: 0;
padding-bottom: 0;
}
#if-logged-in p {
margin: 0;
}
#if-logged-in a:link,
#if-logged-in a:visited {
color: #fff;
text-decoration: none;
}
#if-logged-in a:hover {
text-decoration: underline;
}
#if-logged-in a:active {
text-decoration: underline;
margin-bottom: -1px;
}
.container {
/*padding: 0 60px;*/
width: 768px;
margin: 0 auto;
overflow: hidden;
}
#header-image {
padding: 0;
overflow: hidden;
}
/* HEADER IMAGE
full size - 1068x300
8 column layout resized to 890x250 displayed at 648x250
5 column layout resized to 534x150 displayed at 396x150
3 column layout resized to 365x100 displayed at 228x100
*/
#header-image img {
width: 890px;
height: 250px;
margin-left: -121px;
padding: 0;
}
#content {
width: 356px; /* 5 columns */
margin: 0;
padding: 20px;
overflow: hidden;
}
#sidebar {
width: 184px; /* 3 columns */
margin: 0;
padding: 20px;
overflow: hidden;
}
::selection {
background: #c6d8cd;
}
::-moz-selection {
background: #c6d8cd;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent;
}
特定于该ipad大小和分辨率的
.container{}
样式应该在您的媒体查询中。因此,如果iPad上的容器应为400px宽,那么您的代码应为:
/* iPad 1 & 2 (landscape) */
@media (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
.container {
width: 400px;
/* all other .container styles specific to the iPad 2 in landscape should go here */
}
#if-logged-in {
/* other styles go in their respective selector in the media query */
}
}
不要忘记,有一款iPad没有视网膜显示器,这意味着如果您有任何背景图像或从css加载的svg图像,那么这些图像应该设置为指向在视网膜iPad媒体查询中的视网膜iPad上看起来不错的2倍分辨率的资产