<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
function hengshuping(){
if(window.orientation==180||window.orientation==0){
document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 1330) + "px";
}
if(window.orientation==90||window.orientation==-90){
document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 640) + "px";
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
}
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
@media all and (orientation: portrait) {
div{
100%;
height: 1rem;
background: red;
text-align: center;
line-break: 1rem;
}
}
@media all and (orientation: landscape) {
div{
100%;
height: 3rem;
background: yellow;
text-align: center;
line-break: 1rem;
}
}
</style>
</head>
<body>
<div>
nihao
</div>
</body>
</html>