我正在使用WP骨架，并修改它以适应我的网站。但是，我的网站目前仅在我的电脑上的Chrome中响应，而不是在我的手机上。
div正在改变Chrome的大小，例如当屏幕尺寸为48px时，首页（类图像框）上的图片为420px，当屏幕尺寸为960px时为300px。在我的手机上，一切都像基本的960px网格一样，并且在当前屏幕尺寸之后不会调整大小。
你能帮助我吗？ /*
Theme Name: WP-Skeleton
Theme URI: https://github.com/wycks/WP-Skeleton-Theme
Author: Wycks
Author URI: wpsecure.net
Description: Responsive Bare Bones framework based on Dave Gamache's getskeleton.com
Version: 1.0
License: http://www.opensource.org/licenses/mit-license.php.
Tags: Responsive, grid, mobile, framework, bare-bones, white, minimal
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* Table of Contents
==================================================
#Base 960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
/* #Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .imagebox.columns { width: 300px; margin-left: 30px; margin-top: 30px;}
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.container .one.column { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .imagebox.columns { width: 240px; margin-left: 23px; margin-top: 23px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 348px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
.columns, .column { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 280px; }
.container .imagebox.columns { width: 300px; margin-left: 0px; margin-top: 5px; clear: both;}
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
/* Float menu left now*/
.menu ul {float:left;}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.columns, .column { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 400px; }
.container .imagebox.columns {width: 420px; margin-top: 10px; clear: both;}
/* Float menu left now*/
.menu ul {float:left;}
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
img.scale-with-grid {
max-width: 100%;
height: auto; }
/* #Base NAV 960 Grid
================================================== */
nav {
padding-top: 10px;
text-align:center;
margin: 0 auto;
}
nav ul {
display: inline;
list-style-type: none;
padding-left: 0px;
}
nav li {
display: inline;
padding-left: 55px;
padding-right: 55px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 300;
}
nav li a:hover {
color:#808080;
-webkit-transition: all 0.3s ease-in-out;
}
nav li a {
color: #282828;
text-decoration: none;
font-size: medium;
}
.nav-button { display: none; }
.logoo { display: none; }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
nav li {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
/* Navigation Button
-------------------------------------------------------- */
nav ul img {
display: none;
}
.logoo {
display: inline;
width: 150px;
margin-top: 0px;
margin: 0 auto;
}
.nav-button {
display: block;
position: absolute;
top: 7px;
left: 7px;
width: 50px;
height: 35px;
background: url('../images/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-position: center center;
background-repeat: no-repeat;
background-size: 21px, 100%;
cursor: pointer;
border: 0 none;
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
border-radius: 5px;
z-index: 999;
text-indent: -9999px;
}
.nav-button:hover {
background-color: rgba(0,0,0,.1);
}
.nav-button.open {
background: url('../images/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-position: center center;
background-repeat: no-repeat;
background-size: 21px, 100%;
}
/* Navigation Bar
-------------------------------------------------------- */
body { padding-top: 50px; }
nav {
width: 100%;
float: none;
background-color: #b0b0b0; /* change the menu color */
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
display: block;
height: 50px;
margin: 0;
padding: 0;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.6);
position: absolute;
left: 0px;
z-index: 998;
clear: both;
}
nav li {
display: none;
width: 100%;
}
nav li a {
display: block;
width: 90%;
padding: 10px 5%;
font-size: 14px;
font-weight: bold;
text-shadow: -1px -1px 0 rgba(0,0,0,.15);
color: white;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.2);
border-top: 1px solid rgba(255,255,255,.1);
}
nav li a:hover {
background-color: rgba(0,0,0,.5);
border-top-color: transparent;
}
nav > li:first-child {
border-top: 1px solid rgba(0,0,0,.2);
}
/* Toggle the navigation bar open */
nav.open {
height: auto;
padding-top: 50px;
}
nav.open li {
display: block;
}
/* Submenus – optional .parent class indicates dropdowns */
nav > li:hover > a {
background: rgba(0,0,0,.5);
border-bottom-color: transparent;
}
nav li.parent > a:after {
content: "▼";
color: rgba(255,255,255,.5);
float: right;
}
nav li.parent > a:hover {
background: rgba(0,0,0,.75);
}
nav li ul {
display: none;
background: rgba(0,0,0,.5);
border-top: 0 none;
padding: 0;
}
nav li ul a {
border: 0 none;
font-size: 12px;
padding: 10px 5%;
font-weight: normal;
}
nav li:hover ul {
display: block;
border-top: 0 none;
}
}
答案 0 :(得分：2)
确保添加viewport元标记。至少，您需要以下内容：
<meta name="viewport" content="width=device-width">
还提供其他选项。请查看下面的参考链接以获取更多信息。