《随“机”应变》3步快速制作网站适配小样

上一节介绍了《随“机”应变》连载一：前言
http://dingxiangming.com/post/1d57a53f_7ea23fe ，提到了为什么将适配这个技术作为一个连载讲出来，因为很多技术装在脑子里的，我觉得这个技术在将来会很重要，所以把脑子里的东西倒出来，给更多的人看。

这节介绍，怎么快速把一个传统的网站，做的响应起来，只需要简单3个步骤。往往一个技术很高深很高深，开做之前已经被自己吓到了，其实在复杂的技术，它都有一个核心，这个核心往往一拨就通。

而这里我要讲的就是核心技术：

1，给网站添加viewport属性，这个是给移动设备看的，也之后移动设备认得出这个，所以添加这个对pc毫无影响。

这段代码来自切图网其中一个手机端项目，这个采用的是固定宽度的做法，还有一种是流式做法，就是宽度100%，用固定宽度的好处在于，对于复杂的结构布局固定宽度有更好的优势。

2，新建responsive.css文件，并在页面中加载它

3，完善responsive.css的内容

@media only screen and (max-width:800px) {

*{ float:none !important; width:auto !important; height:auto !important; min-width:auto !important; min-height:auto !important; font-size:14px !important; line-height:24px !important; }

}

你可以将上述代码拷贝直接拷贝过去，试试看效果，应该会有一点效果，但是肯定是不美观的，因为网站适配没有通用的代码，解决所有网站的布局，只能针对每个项目去分析，去针对性的写代码来实现的。

以上是3大步骤，当然这是最核心的三部，能够确保完全不懂技术的你，按着操作能看到一点点效果。真正上得了台面的，像切图网专业提供适配开发就远不止这么简单了。

例如通常还会有这么一段

作用是让ie9以下浏览器支持html5标签和响应式。

如果你对响应式、适配等技术感兴趣，可以加我qq 613371729，或者微信：dingxiangming82

或者关注我的自媒体主页，给我留言，给我鼓励，激发我去写更多有关技术的文章。http://dingxiangming.com

文/丁向明

---------------------ad----------------------

切图网（qietu.com）全称切图网络技术有限公司，是真正以技术为驱动的公司，提供永久、不依赖第三方的网站适配服务，由资深工程师对每个项目进行分析，开发，以确保每个项目的品质，欢迎洽谈。4000-724-120