极客观点
项目管理
HarmonyOS
如图，这里是pc端的：
切换成手机端就这样了：
请问这是怎么回事呢？
代码如下：
html:
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://ycjjchina.cc/wp-content/themes/ycjjchina/css/base.css">
<link rel="stylesheet" href="http://ycjjchina.cc/wp-content/themes/ycjjchina/css/index.css">
<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/' href='http://ycjjchina.cc/wp-json/' />
</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="输入搜索内容">
</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 href="http://ycjjchina.cc/">首页</a></li>
<li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58"><a href="http://ycjjchina.cc/category/chanpin/">产品世界</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://ycjjchina.cc/%e5%85%b3%e4%ba%8e%e5%85%ac%e5%8f%b8/">关于公司</a></li>
<li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="http://ycjjchina.cc/%e5%94%ae%e5%90%8e%e6%9c%8d%e5%8a%a1/">售后服务</a></li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://ycjjchina.cc/sample-page/">联系我们</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的文件内容)
* {
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%;
}求大神帮忙看看，谢谢了
html5
最简单的方法是给body假一个最小款min-width:1200px