Question

我是新手，我有一个网站，我想做一个响应式设计，它是响应移动但不响应平板电脑，我想创建平板电脑设计像电脑布局不移动，你能帮我解决这个问题吗？问题？也许meta视口和css错误代码，创建最小或最大媒体宽度有多少px？这是我的虚拟网站 http://silanycorp.com/a

此网站用于检查响应式布局 http://ami.responsivedesign.is/#

元视口

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS代码

@media (max-width: 768px) {
.container{
    padding:0;
}
.logo{
    padding-left:0;
}
.hide-on-desktop{
    display:block
}
.header-wrapper{
    padding: 0;
}
.header-outer{

}

感谢您的帮助：）

Answer 1

您可以根据用户拥有的视口宽度加载多个样式表。

这可以使用以下标记来完成：

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

您还可以在样式表中使用以下内容进行设置：

@media all and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

以下是关于该流程的好文章：http://css-tricks.com/css-media-queries/

响应不在平板电脑上工作

1 个答案: