关于#前端#的问题，请各位专家解答！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#b{
width:100%;
height:1940px;
background: linear-gradient(to right,white,skyblue);
}
#button{
width:120px;
height:100px;
position:absolute;
top:1%;
right:3%;
background-color:orange;
background-size:contain;
border-bottom-right-radius:35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-top-left-radius: 35px;
}
#button1{
width:120px;
height:100px;
position:absolute;
top:1%;
right:17%;
background-color:orange;
background-size:contain;
border-bottom-right-radius:35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-top-left-radius: 35px;
}
#button2{
width:120px;
height:100px;
position:absolute;
top:1%;
right:31%;
background-color:orange;
background-size:contain;
border-bottom-right-radius:35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-top-left-radius: 35px;
}
#button3{
width:100px;
height:100px;
position:absolute;
top:0;
left:0;
border: 5px solid orange;
}
#countiner{
width:200px;
height:100px;
position:absolute;
top:1%;
left:9%;
border: 2px solid black;
border-bottom-right-radius:30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-top-left-radius: 30px;
}
#countiner1{
width:200px;
height:50px;
position:absolute;
top:0;
left:9%;
border-bottom: 2px solid black;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
#button4{
width:400px;
height:200px;
position: absolute;
top:20%;
right:5%;
background-color: white;
border:2px solid balck;
}
#button5{
width:100px;
height:100px;
position: absolute;
left:26%;
top:86%;
border: 2px solid skyblue;
border-radius: 50%;
}
#button6{
width:100px;
height:100px;
position: absolute;
left:9%;
top:55%;
border: 2px solid skyblue;
border-radius: 50%;
}
#button7{
width:100px;
height:100px;
position: absolute;
left:26%;
top:55%;
border: 2px solid skyblue;
border-radius: 50%;
}
#button8{
width:100px;
height:100px;
position: absolute;
left:9%;
top:86%;
border: 2px solid skyblue;
border-radius: 50%;
}
#button9{
width:400px;
height:200px;
position: absolute;
top:20%;
left:5%;
background-color: white;
border:2px solid balck;
}
#button10{
width:400px;
height:100px;
position:absolute;
top:60%;
right:5%;
border:2px solid black;
transform: skewX(-30deg);
}
#button11{
width:400px;
height:100px;
position:absolute;
top:60%;
right:5%;
border:2px solid black;
transform: skewX(-30deg);
}
#button12{
width:400px;
height:100px;
position:absolute;
top:80%;
right:5%;
border:2px solid black;
transform: skewX(-30deg);
}
#button13{
width:100px;
height:30px;
position: absolute;
bottom:0;
right:3%;
background-color:red;
border-radius: 10px;
}
#button14{
width:100px;
height:30px;
position: absolute;
bottom:0;
right:13%;
background-color:red;
border-radius: 10px;
}
#button15{
width:100px;
height:30px;
position: absolute;
bottom:0;
right:23%;
background-color:red;
border-radius: 10px;
}
#button16{
width:100px;
height:30px;
position: absolute;
bottom:0;
right:33%;
background-color:red;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="b"></div>
<button id="button">邮件</button>
<button id="button1">好友</button>
<button id="button2">巅峰殿堂</button>
<button id="button3"></button>
<button id="countiner">等级</button>
<button id="countiner1">账号</button>
<button id="button4"></button>
<button id="button5"></button>
<button id="button6"></button>
<button id="button7"></button>
<button id="button8"></button>
<button id="button9"></button>
<button id="button10"></button>
<button id="button11">竞技模式</button>
<button id="button12">排位</button>
<button id="button13">设置</button>
<button id="button14">成就</button>
<button id="button15">卡牌</button>
<button id="button16">活动</button>
<script>
document.getElementsById("")</script>
</body>
</html>
我想问一下，为什么我的编码到了手机上或者将整个页面旋转90度的时候就乱了
如果没有横屏对应的css样式，那页面样式就会乱；
看需求了，如果需要横屏 那就写横屏样式，记得在这里写
/* 横屏 */ @media screen and (orientation: landscape) { // some css code }如果不需要，那就在横屏时 给出相应提示，比如 “为了更好的体验，请使用竖屏浏览”，还可以再加个小动画，类似这样子
<script>
// 横屏提示
(function landscape (isVertical, config) {
var showWay = isVertical ? "@media screen and (min-aspect-ratio: 12/7){#orientLayer{display:block;} }" :
"@media all and (orientation : portrait){#orientLayer{display: block;} }";
var color = config && config.color ? config.color : "#000",
txt = isVertical ? "为了更好的体验，请使用竖屏浏览" : "为了更好的体验，请使用横屏浏览",
images = config && config.images ? config.images :
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vb////x8fH////////x8fH5+fn29vby8vL////5+fn39/f6+vr////x8fH////////+/v7////09PT////x8fH39/f////////////////////x8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC";
// style
var nodeStyle = document.createElement('style');
nodeStyle.setAttribute('type', 'text/css');
nodeStyle.innerHTML =
'@-webkit-keyframes rotation{10%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 50%, 60%{transform: rotate(0deg); -webkit-transform: rotate(0deg)} 90%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 100%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} } @keyframes rotation{10%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 50%, 60%{transform: rotate(0deg); -webkit-transform: rotate(0deg)} 90%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 100%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} } #orientLayer{display: none; z-index: 999999;} ' +
showWay +
' .mod-orient-layer{display: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: ' +
color +
'; z-index: 9997} .mod-orient-layer__content{position: absolute; width: 100%; top: 45%; margin-top: -75px; text-align: center} .mod-orient-layer__icon-orient{background-image: url(' +
images +
'); display: inline-block; width: 67px; height: 109px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out; -webkit-background-size: 67px; background-size: 67px} .mod-orient-layer__desc{margin-top: 20px; font-size: 15px; color: #fff}'
document.getElementsByTagName('body')[0].appendChild(nodeStyle);
// dom
var nodeDom = document.createElement('div');
nodeDom.setAttribute('id', 'orientLayer');
nodeDom.setAttribute('class', 'mod-orient-layer');
nodeDom.innerHTML =
'<div class="mod-orient-layer__content"> <i class="icon mod-orient-layer__icon-orient"></i> <div class="mod-orient-layer__desc">' +
txt + '</div> </div>';
document.getElementsByTagName('body')[0].appendChild(nodeDom);
}(1));
</script>