快速把pc端网站实现响应式适配移动端的方法

何谓响应式网站？也就是区别于传统网站，能自动识别设备屏幕大小，根据屏幕分辨率做出自动调整清晰展示页面的网站。同一个网站，不管是在电脑端，还是在手机或者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等计量单位。

👋 感谢您的观看！

版权声明 1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

THE END