javascript - 他们这些响应式布局，都是用bootstarp写的么。。。-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 他们这些响应式布局，都是用bootstarp写的么。。。

PHP中文网 2017-04-11 11:10:32

[JavaScript讨论组]

702

假如不用bootstarp呢。
比如这种类型的网站-。- 具体怎么实现的呢http://www.cyzone.cn/

PHP中文网

认证高级PHP讲师

全部回复(8)

怪我咯2017-04-11 11:12:32 8楼

简单的可以自己写，利用百分比布局，判断视口宽度加载不同的样式文件，不过比较麻烦~ bootstarp是一套页面通吃，如果内容比较复杂的站，可以分开做PC端的和webapp~

赞 +0

添加回复

巴扎黑2017-04-11 11:12:32 7楼

bootstrap有它的优势，也有它不足的地方，这个得看实际项目是否适用。

赞 +0

添加回复

迷茫2017-04-11 11:12:32 6楼

我认为做两套页面比较合适，响应式的缺点还是非常大的。做的时候也很麻烦啊，也要同时考虑PC和MOBILE两个平台，其实也就和做两套页面一样了。
一般来说，把服务做成接口，PC和MOBILE页面调用接口来完成展示，这是比较好的设计，会大大降低工作量。

赞 +0

添加回复

PHP中文网2017-04-11 11:12:32 5楼

响应式设计，主要使用css的媒体查询(Media Query)来做。使用媒体查询可以让浏览器在不同的宽度上为元素应用不同的样式。bootstrap也是这样做的吧。题主想要自己写响应式，建议先了解了解css媒体查询。

赞 +0

添加回复

PHP中文网2017-04-11 11:12:32 4楼

如果不用bootstrap框架的话，一般就是使用媒体查询判断屏幕宽度，加载不同的样式，使用rem让页面内容随着屏幕的变化而变化。

赞 +0

添加回复

PHP中文网2017-04-11 11:12:32 3楼

完成这类响应式布局网站就两个知识点：

Grid 栅格设计
css的媒体查询标签

栅格设计概念比较简单了，去感受一下什么是栅格设计。

栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。来自维基百科

css的媒体查询标签，算是一种简单功能吧！能为你提供不同屏幕尺寸下显示不同样式及内容的方便，比如：

@media screen and (max-width: 1200px){
    //屏幕宽度到1200px宽时
    body{
        background-color: red;
    }
}
@media screen and (max-width: 960px){
    //屏幕宽度到960px宽时
    body{
        background-color: blue;
    }
}

至于bootstrap只是结合了上面两个知识点和经验总结下来的产品，如果你是想了解学习就找这两个点的内容，如果是工作需要，建议你先使用bootstrap来实现减少麻烦！

赞 +0

添加回复

巴扎黑2017-04-11 11:12:32 2楼

应该用的是百分比写的页面看引入的文件里面没有bootstarp 而且还应该有媒体查询

赞 +0

添加回复

ringa_lee2017-04-11 11:12:32 1楼

宁浩网的响应式页面设计、响应式网站分享-外国、响应式网站分享-中国可以参考

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>