如何添加CSS让页面自适应手机屏幕

头部添加下面代码(head最顶部)

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">

在要显示自适应的内容上面添加如下代码(添加在head之间)

<style>
#usernameSpan{line-height:30px; font-size:14px;}
 
@media(min-width:800px)
{
#usernameSpan,#word,#send{float:left;}
#word{width:400px;height:30px;font-size:12px;}
#send{border:#DDD 1px solid;background-color:#e8e8e8;padding:6px;color:#000000;font-size:15px;}
}
 
@media(max-width:799px)
{
#word{max-width:200px;height:30px;font-size:12px; float:left;}
#send{border:#DDD 1px solid;background-color:#e8e8e8;padding:6px;color:#000000;font-size:15px;}
}
</style>
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享