开发响应性网站的技巧
我有问题，试图找出一个良好的工作流程时，设计一个响应网站。
我尝试过几种方法，现在我所做的是：
- 是否所有html和css都能最大限度地使用窗口(大约1400 Do宽)
- 然后我缩小它并插入
@media screen and (min-width: 600px)(例如，当我看到布局变硬，然后修复它)。 - 再缩小一点，然后再去找前任。
@media screen and (min-width: 400px)等等..。
在HTML中，我使用<meta name="viewport" content="width=device-width, initial-scale=1">，作为that0s，它是如何从HTML5Boilerplate中产生的。
从大窗口到小窗口，从大窗口到小窗口，一切看起来都很好，最终我有了一个好的移动版本的网站。
不错，对吧？不是的。问题是，当我再次最大限度地恢复，一些事情是混乱的，它是难以置信的难以修复。就像令人沮丧，费时.
我尝试过这个痛苦的过程，从大到小，反之亦然。
使用vw单元有很大帮助(现在我把它放在了所有地方)，但它仍然是一场噩梦，至少对我来说是这样。
我甚至尝试过像Macaw或Reflow这样的程序，但是我不太舒服，因为最后我必须手工进行一些修饰/优化，所以为什么不开始手工完成所有的操作呢？
我肯定做错什么了。那是什么？做这件事最好/最简单的方法是什么？使用max-width是一个更好的主意吗？
肯定有一个我不知道的明显的工作流。
回答 1
Webmasters Stack Exchange用户
发布于 2014-09-21 07:41:39
我认为没有人能给你具体的建议，为什么反应式的设计这么难编码，但通常有两种方法。你为尽可能小的屏幕设计并以你的方式向上工作(首先是移动的)，或者你从尽可能大的屏幕开始，然后往下工作。您可以非常精细地处理事物，这是一个用户偏好的问题，您想要显示/隐藏什么div，或者根据您的响应性设计重新设计样式。经过多年的处理响应设计，这里是我如何处理它。
- 我总是设计显示器首先在最大可能的屏幕。以下是我的断点：
- 大于2560的宽度(然后我只是把网站的信箱变成2560)
- 1921-2560-巨大的屏幕(电影显示器)
- 1441-1920-高清屏幕
- 1100 - 1440 - Macbook Air
- 平板电脑(设备定位肖像)现代化触摸启用
- 平板电脑(设备定位景观)现代化触摸启用
- 手机(设备定位纵向)现代化触摸启用
- 手机(设备定位景观)现代化触摸(我们只是覆盖一个div并告诉他们转动他们的设备，因为景观电话是不可能设计的)。
同样，这取决于您的项目的工作方式，以及您拥有的断点数。如果您使用的是twitter引导程序，那么它们有一组不错的断点(不高到2560)，这会给您一个好的开始(如果您愿意用大量未使用的css类支付费用的话)。。
https://webmasters.stackexchange.com/questions/69295
复制相似问题
腾讯云开发者
