网页中做到自适应的响应式页面有几种方法？

Question

如题所述

Answer 1

做响应式页面就两种方法：
一是通过各种技术写一套响应的代码，要用到的技术，如通过设置百分比宽，使用栅格系统，和通过媒体查询，弹性布局等结合来实现。这样写的好处了代码只需要写一套。但是这样写要做兼容各种移动端肯定会有各种各样的问题出现。
第二种方法是：写两套代码，pc端和移动端分开来写，然后再通过添加js获取屏幕的分辨率（或者通过获取用户设备来）来进行判断用户是在什么设备上打开，然后根据条件来打开页面
这样做的好处是两套代码分开来，维护方便，移动端页面也不会受pc端布局影响，开发灵活。
但是这样的话需要写一个判断页面然后使用两个2级域名，分别对应移动端和pc端。

Answer 2

这个有三种的
一种是设置百分比，用浮动等方式排版，但是这非常的麻烦
还有用css的弹性盒子，这种方法相对更好一些
最后一种是bootstrap的12栅格系统
有帮助别忘记采纳哈本回答被提问者采纳

Answer 3

如果很多页面都需要做自适应的话，建议使用bootstrap这类成熟的框架，如果页面不多，可以使用媒体查询的方式：
@media screen and (min-width:1201px) and (max-width:1366px){}

@media screen and (max-width:1200px){}