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

2024年11月28日 00:41
有3个网友回答
网友(1):

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

网友(2):

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

网友(3):

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

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