Question

以下代码是包含文件的一部分，该文件包含网站标题。

<head>
<link rel="shortcut icon" href="favicon.ico">
<meta charset="utf-8" />
<title>Test Site | Foo The Bar </title>
<link rel="stylesheet" href="csss_standard.css">
</head>

<body>

<div id="big_wrapper">



    <header id="Header">
        <a href="homepage.php"><img src="home_page_art.png" alt="Logo"></a>
    </header> 

    <div id="navigation">
        <ul>
            <li id="page_1"><a href="page1.php">Page 1</a></li>
            |
            <li id="page_2"><a href="page_2">Page 2</a></li>
            |
            <li id="Page_3"><a href="page_3.php">Page 3</a></li>
            |
            <li id="page_4"><a href="page_4">Page 4</a></li>
            |
            <li id="news"><a href="news_and_such.php">Page 5</a></li>

        </ul>
    </div> 

</div>

<br>
<br>

</body>

在桌面网站上，这看起来很棒。一切都很合适。但是当涉及到在移动网站上获取它时，该网站似乎适合中央＆＃34;肉和土豆＆＃34;我放了所有内容的div。 div是一列，其宽度显式声明为1000px，如下所示。

#meat_and_potatoes{
display:block;
text-align:center;
padding: 15px;
width:1000px;
text-align:center;
margin-left:auto;
margin-right:auto;
float:center;
background:#D8D8D8;
box-shadow: 1px 0px 20px 0px rgba(50, 50, 50, 0.75);

}

标题和#Header div css如下。

#Header{
margin: 0px 0px;
display:block;
width:105%; <!-- this was originally not a property. I was toying around with it to no avail... -->

/* orange gradiant */

background: rgb(255, 180, 0);
background: -moz-linear-gradient(90deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);
background: -webkit-linear-gradient(90deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);
background: -o-linear-gradient(90deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);
background: -ms-linear-gradient(90deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);
background: linear-gradient(180deg, rgb(255, 180, 0) 51%, rgb(255, 216, 0) 100%);

height: auto;
float:left;
padding-left:10px;
}



header, section, footer, aside, nav, article, hgroup{
display:block;
}

如上所述，移动视图自动适应此中心div。移动设备是否明确声明宽度？问题可能在于头文件在.inc中的代码吗？（我很怀疑它只是因为我在下面的实际页面中测试了几乎每个div标签的源代码）这可能是移动与桌面CSS视图的问题吗？（E.G＆＃34;屏幕＆＃34; rel类型）

我意识到这个问题有很多可动的部分，所以如果需要别的东西，请告诉我。

Answer 1

Andrew希望这可以让您更好地了解应该编写媒体查询的大小： -

/* 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 */
}

根据您想要提供的观众来编写媒体查询，如果我只需要编写一个，我会选择第一个，因为它涵盖了大多数智能手机。请继续说清楚你有什么疑问，并问我你对此有什么看法。很想再帮助你。

CSS - PHP标头包含文件不适合设备大小/达到整个宽度

1 个答案: