何谓响应式网站？也就是区别于传统网站，能自动识别设备屏幕大小，根据屏幕分辨率做出自动调整清晰展示页面的网站。同一个网站，不管是在电脑端，还是在手机或者Ipad端，它都可以提供相同的用户浏览体验。现在几乎每个网站都有适配移动端的设计了，所以无需额外的代码，但是依旧有很多的网站没有移动适配，需要我们加上点代码才能实现。
一、首先需要在<head></head>标签中写上如下代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">声明网页是否允许放大缩小
二、引入移动端CSS样式
可以通过两种方法引入
1.在meta标签中引入css文件
<link rel="stylesheet" href="css/m_index.css" media="screen and (max-width:767px)" />意思是在屏幕宽度小于767px的时候执行引入的css文件样式。
2.在head标签中写入style标签
<style type="text/css">
@media(max-width:767px)
{
}
</style>含义同上，在屏幕宽度小于767px的时候执行的css样式。
三、修改css样式
在宽度小于某个值的时候将不需要元素display:none;隐藏掉。网页内元素宽度尽量使用百分比%，文字大小可使用em等计量单位。
👋 感谢您的观看！
© 版权声明
THE END
