WEB响应式网站如何实现?

在这里插入图片描述
1.在开发中往往会遇到客户需要网站有响应式效果,那么什么是响应式?什么是自适应呢?他们之间有哪些区别?

响应式网站:指能兼容PC(w>=1080),平板电脑(768<w<1200),移动端(w<=768)这三种设备的网站,会改变原始布局直到达到对应设备布局效果。

自适应:指能够随窗口大小伸缩而不改变原来布局效果。
2.如何实现?虽然不同人实现方式都有所不同,但我推荐一种个人认为相对较简单又不容易出错的方法。
主要方法:boostrap+flexible.js(该文件链接链接:https://pan.xunlei.com/s/VNAtb2vPvNsY16j91ebKJSfJA1?pwd=ukab#
提取码:ukab

boostrap的删栏布局可以很快速的达到页面盒子大小随屏幕大小改变的效果,不过boostrap本身对边距的把控样式类有些局限,所以这会使我们外部盒子大小发生改变,内部的字体或者盒子边距无法精确达到缩放的效果,因此我们还需要结合flexible.js来实时改变根标签html的fon-size大小,这样字体和边距等值就可以使用rem达到伸缩自如,但最后还需使用媒体查询给屏幕设置一个最小值,在达到这个值之后的font-size将保持不变。

响应式网站案例

猜你喜欢

转载自blog.csdn.net/m0_45299232/article/details/126583625
今日推荐