如何创建响应式网站设计？

我正在设计一个网站的过程中，我希望它与所有屏幕分辨率一起工作。如何创建响应式网站设计？

这是我想要的一个例子。

我的问题是，什么是代码这样的事情的最好方法？

我会做类似

if(resolution < 768px) 
    //resize page and or move elements around 
else if(resolution == 1080px) 
    ////resize page and or move elements around

来源

2014-10-08 Instinct

相信我，在这种情况下重写您的整个网站并不是一个好主意。你可以做的是在页面上定义所有长度，宽度和所有其他大小，而不是像素。然后他们会自动调整到屏幕大小:) – pattyd 2014-10-08 00:56:40

我正在考虑这样做，但使用手机上的网站将有同样的外观，有时是不可取的桌面。我希望移动体验看起来有点不同，我希望不必创建移动版本的网站就可以做到这一点。 – Instinct 2014-10-08 01:12:35

你不能吃你的蛋糕，也不能吃太多人：D – EternalHour 2014-10-08 01:14:38

退房引导。它是基于Twitter开发的用于创建响应式网站的基于HTML5和CSS3的框架。见http://getbootstrap.com/。

来源

2014-10-08 00:56:08 mti2935

我正在研究bootstrap，特别是网格系统，我觉得当我调整浏览器的大小时，某些网格会移动到下一行。有什么方法可以选择移动到哪里？ – Instinct 2014-10-08 01:03:16

更改页面中元素的位置可以通过响应Bootstrap列类进行更改。 – 2014-10-08 01:17:40

这是我将网格系统放在下面的确切原因，所以它可以更灵活地满足我需要的功能（无双关语意图）。当我开始学习响应式设计时，许多类的名称对我来说都没有意义..（即col-6 col-6）。他们依靠“12列布局”。矿山依赖基于百分比的布局，总是等于100％，而不是“col-6 col-6”，我的“col50 col50”等于100％，而不是列限制。这对我来说简单些，都归结为偏好。 – Oneezy 2014-10-08 01:23:16

针对行业标准中断点的Css媒体查询通常是要走的路。这是一个常见的实现是bootstrap。

来源

2014-10-08 00:57:13 TGH

我已经制作了一个简单的网格系统，基于一些流行的网格系统，如金色网格系统和boostrap。检查出来，并开始玩W /它：http://oneillwebs.com/grid/

点击（下载）链接以获取它的完整版本。

来源

2014-10-08 01:00:12 Oneezy

如何创建响应式网站设计？

回答

相关问题