如圖，這里是pc端的：
切換成手機端就這樣了：
請問這是怎么回事呢？
代碼如下：
html:
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" >
<link rel="stylesheet" >
<title>藝臣地板</title>
<meta name='robots' content='noindex,follow' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/ycjjchina.cc\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.4"}};
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56692,8205,9792,65039],[55357,56692,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='https://api.w.org/' />
</head>
<body>
<header>
<div class="top">
<div class="width">
<div class="left">
<img class="logo" src="http://ycjjchina.cc/wp-content/themes/ycjjchina/images/logo.png" alt="">
</div>
<div class="right">
<div class="top right">
<a href="">中文</a><span> | </span><a href="">English</a>
</div>
<div class="clr"></div>
<div class="bottom">
<a class="left" href="">
<img src="http://ycjjchina.cc/wp-content/themes/ycjjchina/images/weixin.png" alt="">
</a>
<a class="left" href="">
<img src="http://ycjjchina.cc/wp-content/themes/ycjjchina/images/weibo.png" alt="">
</a>
<form class="left" action="">
<input type="text" placeholder="輸入搜索內(nèi)容">
</form>
</div>
</div>
</div>
</div>
<div class="line"></div>
<nav>
<div class="width">
<div class="men"><ul id="menu-menu-1"><li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-40"><a >首頁</a></li>
<li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58"><a >產(chǎn)品世界</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a >關(guān)于公司</a></li>
<li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a >售后服務(wù)</a></li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a >聯(lián)系我們</a></li>
</ul></div> <div class="tel">400-001-2233</div>
</div>
</nav>
</header> <div></div>
<div></div>
<div></div>
<footer>
</footer>
</body>
</html>css:(index.css是空的，所以這里我放了base.css的文件內(nèi)容)
* {
margin:0;
padding:0;
}
ul {
list-style-type: none;
}
.left {
float:left;
}
.right {
float:right;
}
.clr {
clear:both;
}
/* 頭部 */
header {
width:100%;
}
header > .top {
width:100%;
height:96px;
padding:20px 0;
background-color: #fff;
}
header > .top .width {
width:1340px;
height:100%;
margin:0 auto;
}
header > .top .width > .right {
margin-right:100px;
margin-top:5px;
}
header > .top .width > .right > .top {
margin-right:3px;
}
header > .top .width > .right > .top span {
color:#000;
}
header > .top .width > .right > .top a {
text-decoration: none;
color:#c9c9c9;
}
header > .top .width > .right > .bottom {
margin-top:3px;
}
header > .top .width > .right > .bottom > a {
margin-left:10px;
}
header > .top .width > .right > .bottom > form {
margin-left:22px;
}
header > .top .width > .right > .bottom > form input {
width:245px;
border:0;
font-size:14px;
height:38px;
line-height: 38px;
padding-left:16px;
padding-right:45px;
background: url(../images/search.png) repeat-x;
}
header > .line {
width:100%;
height:30px;
background-color: #231f20;
}
header > nav {
width:100%;
height:70px;
background: url(../images/nav_bg.png) repeat-x;
}
header > nav .width {
width:1240px;
height:100%;
margin:0 auto;
padding-left:550px;
}
header > nav .width .men {
float:left;
width:800px;
height:100%;
}
header > nav .width .men ul {
width:100%;
height:100%;
}
header > nav .width li {
width:100px;
height:100%;
float: left;
padding:16px 20px;
}
header > nav .width li a{
color:#000;
text-decoration: none;
}
header > nav .width > .tel {
float:left;
width:315px;
height:36px;
background-color: #fff;
color:#000;
margin-right:60px;
margin-top:9px;
font-size:22px;
font-weight: 700;
line-height:36px;
padding-left:15px;
}
/* 尾部 */
footer {
width:100%;
height:314px;
background: url(../images/footer_bg.png) no-repeat;
}
footer .width {
width:1340px;
height:100%;
}求大神幫忙看看，謝謝了
你這寬度很多都寫死了啊，加個
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">然后用@media寫下響應(yīng)式布局
最簡單的方法是給body假一個最小款min-width:1200px
header > .top .width {
width:1340px;
height:100%;
margin:0 auto;
}問題在這寬度寫死了。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團創(chuàng)建于1999年，經(jīng)過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團，成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多