响应设计像素与百分比 [英] Responsive Design Pixels vs percentages

问题描述

我希望有人能帮助你。

我最近在一个众所周知的网站上观看过响应式网页设计的视频。

我对导师采取的方法感到困惑。他基本上创建了三个样式表（大/中/小），在每个样式表中，他给出了DIVS的PX宽度，并在必要时交换图像。

当然，这个方法有缺陷的，他可以只使用百分比流体布局，而不是通过媒体查询的不同样式表

他的方法有什么优点吗？

非常感谢，

解决方案

灵活设计和响应式设计之间有区别。

根据我读过的一些书，你可以通过使用％length
值来使布局灵活，因此布局适应于精确的尺寸

如果您使用媒体查询构建响应式设计，则可以使用
绝对长度（像素）进行设计，编码值根据
不同，您的媒体查询中定义的屏幕大小限制。

因此，灵活的设计可以很好地作为响应式设计，响应式设计可以
基于固定宽度的布局。

不用说，你使用的方法将取决于你尝试的设计
build以及它必须在各种设备上工作。

你的教程的作者不一定是错的，但他们的方法可能不是
最有效的方法来构建响应式设计。在某些情况下，如果您使用
％值，您可以使用更简洁的CSS样式表来实现您的设计。

I'm hoping someone can help.

I'm recently watched a video on responsive web design on a well know site.

I'm puzzled by the method taken by the tutor. He basically creates three styles sheets (large / medium / small) and in each stylesheet he gives the PX widths of DIVS and swaps images where necessary.

Surely, this method is flawed , he could just use percentages for fluid layout instead of different styles sheets called via media queries??

Is there any advantages to his method?

many thanks,

解决方案

There is a distinction between a flexible design and a responsive design.

According to some of the books that I read, you can make a layout flexible by using % length values, so the layout adapts to the exact dimensions of the viewport's width.

If you build a responsive design using media queries, you can make a design that uses absolute lengths (pixels) and adjust those hard-coded values to differ according to the screen size limits defined in your media queries.

So, a flexible design may work well as a responsive design, and a responsive design may be based on a fixed-width layout.

Needless to say, the approach that you use will depend on the design that you are trying to build and how it must work in various devices.

The author of your tutorial is not necessarily wrong, but their approach may not be the most efficient approach to building a responsive design. In some cases, if you use % values, you may achieve your design with a much more concise CSS stylesheet.

这篇关于响应设计像素与百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！