关于web网页的自适应问题

使用CSS方法

使用@media我们可以设置在特定的屏幕下设置不同的样式

例如： @media screen and (max-width:500px){body{background:green;}}/*宽度小于500px时 绿色*/
    @media screen and (min-width:800px){body{background:red;}}/*宽度大于800px时 红色*/
   @media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px时 黄色*/
   @media screen and (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/

在head头部添加一个meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,minimal-ui">

这个标签主要用于针对与正常电脑网页切换到手机屏幕大小下时原网页就变小以致于到了看不清的状态