网页设计流畅度

Question

我在找人来引导我走向正确的方向。我有一个功能强大的网页，可以在我的13英寸MacBook上快速运行，问题在于查看网页的大小和元素的扭曲程度。需要做什么样的事情才能确保它在任何屏幕上看起来都很干净和美观当我详细说明元素的高度和宽度时是否需要使用百分比，或者是否需要一些javascript。

我意识到这是广泛的，所有即时通讯寻找的是有人引导我应该改变什么，所以我可以得到现场直播。

谢谢！

Answer 1

我猜你可能需要引导作为参考！

它响应迅速，并且在不同的分辨率屏幕上显示几乎相同！

所以尝试这样的事情。

，如果你想使你的网站看起来像所有的屏幕上一样，尝试PRECENTAGE（但不建议！）

Answer 2

大方向：

你想看看media queries，使您的设计responsive不同的观看媒体。你会想要考虑其他元标记，例如定义视口大小的元标记，但通常你可以用CSS来完成。

下面是可以换您的自定义CSS规则为每个设备尺寸例如查询：

/* Smaller than standard 960 (devices and browsers) */ 
    @media only screen and (max-width: 959px) {} 

    /* Tablet Portrait size to standard 960 (devices and browsers) */ 
    @media only screen and (min-width: 768px) and (max-width: 959px) {} 

    /* All Mobile Sizes (devices and browser) */ 
    @media only screen and (max-width: 767px) {} 

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
    @media only screen and (min-width: 480px) and (max-width: 767px) {} 

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
    @media only screen and (max-width: 479px) {} 

显然，你会想根据需要，以确保您的内容不会被揉皱以填补在CSS规则。

一个好的策略是为小型移动应用程序设计，然后从那里开始做大。这样你就不会发现自己试图阻塞。太。许多。进入一个小界面。

一般来说，您也可以使用float:left;属性作为主要布局块（而不是绝对位置等）。这样，当父元素太窄而不能同时具有这两种属性时，侧边栏等会浮动在主内容的上方/下方并排侧。

另外，是的。您可以使用百分比等流畅地填充区域。使用background-属性代替<img>标签。希望有所帮助。

Answer 3

您需要css3-mediaqueries为响应设计或流体设计

我们可以根据不同browser window size分配不同stylesheets。

你必须知道如何使用CSS Media Queries & Using Available Space

这里有一个去 What are CSS Media Queries and how to implement them. 太

我想不编辑我的回答更多的，但我已经得到了一些很好的意见，以改变我的想法从http://www.webmonkey.com/2011/06/tips-tricks-and-best-practices-for-responsive-design/

1. 使用@media规模布局的任何屏幕，但要记住， 这本身是不是真的responsiv e设计。

2. 使用可适应任何屏幕尺寸的液体布局。不要 只为iPhone/Android设计一个外观，一个用于平板电脑和 一个用于桌面。保持液体，否则当一些新的中间屏幕尺寸突然变得流行时会发生什么？

3. 根据您网站内容的细节展示自己的网格。 罐装网格系统很少符合该法案。 罐装网格的问题在于它们不适合您的独特内容。创建 布局从内容出来，而不是画布（或网格）。

4. 从小开始。从最小尺寸的屏幕开始，按照您的方式向上添加@media规则，以将元素浮动到平板电脑和桌面浏览器的较大窗口中。从较窄的单列 布局开始处理移动浏览器，然后从那里扩大比相反 。

5. 使用响应或CSS3媒体查询JavaScript库来 引导@media查询支持到旧的浏览器不会 否则知道该怎么做。从最小的屏幕 开始，并且继续前进意味着它是需要 处理@media的桌面浏览器，请确保旧版浏览器使用像 响应的填充。

6. 忘记Photoshop，在浏览器中构建你的合成器。它几乎不可能嘲笑Photoshop中的液体布局，而是从 浏览器开始。

7. 使用img缩放图像{max-width：100％; }。对于非常大的图像， 考虑使用类似响应式图像来提供最小屏幕的图像下载量较小，然后使用JavaScript来更大图像的 交换大屏幕。

8. 拥抱延迟加载。可能有您的网站上的项目，辅助 内容，这是很好，但不是必需的。主内容加载完成后，使用JavaScript加载内容 。

9. 忘掉完美。即使有了这些建议，您仍然可以在 以外的情况下删除旧版浏览器禁用JavaScript的用户。 这类用户越来越少见，如果他们在桌面上看到移动版图 ，那么猜猜看，这不是世界末日。您的 网站仍然完全可用。