我们不应该使用“Pixel”吗?对于 CSS 中的任何内容,如果我们正在为移动设备制作一个网站?
如果我们正在为移动设备制作网站,我们是否应该在 CSS 中使用“Pixel”?
px
用于布局和字体。对于移动网站上的所有内容,我们应该只使用 em
还是 %
吗?
如果我使用 那么我应该在 HTML 代码中定义
的高度和宽度吗?或者最好不要定义。或者我应该在 css 中为
定义大小,也可以在
%
或 em
编辑:
注意:问题不再是关于 px
与 em
的争论我的问题专门针对单独的移动网站。当我们制作具有不同域或子域的单独移动网站时。
Shouldn't we use "Pixel" for anything in CSS if we are making a site for mobile devices?
px
for layout and font. Should we only use em
or %
for everything on mobile sites?
and if i'm using <img>
then should i defined height and width for <img>
in HTML code? or it's good to not to define. or i should define size in css for <img>
also in %
or em
Edit:
Note: Question is not again about px
vs em
debate My question is specifically for separate mobile site. when we are making separate mobile site with different domain or sub-domain.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
一切都取决于上下文。与桌面浏览器的 CSS 一样,在某些情况下使用像素并不是一个好主意(例如,大多数情况下对于字体大小),而在某些情况下像素仍然非常有用(例如固定布局)。
一般来说,避免在不需要时使用像素。例如,没有理由对字体这样做:不是您,而是选择字体在高分辨率屏幕上是否必须很大的用户。使用百分比还可以帮助您记住一段文本永远不可能有精确的宽度和高度,并迫使您调整您的设计。
现在,有时,出于成本或其他原因,您必须进行固定布局,或者至少页面的某些部分(关联图像和文本)的大小必须固定。在这种情况下,使用像素并没有什么错。如果我有一个
,里面有一些文本和漂亮的 200×100px 背景,最明显的事情就是设置这个
到 200 和 100 像素。
恕我直言,你永远不应该这样做。图像的大小纯粹是布局/设计的问题,因此它与 HTML 无关,而是与 CSS 有关。
CSS 中必须指定图像的大小吗? 如果您希望图像 100% 显示,那么您不必这样做:这是每个浏览器的默认设置。如果您想缩小它,并且由于某些原因,您无法缩放图像本身而不是将缩放后的图像保存在服务器上,那么您可能需要指定图像的大小。
请记住,在客户端发送大图像并缩小比例始终是一个坏主意。视觉质量可能会受到影响,并且客户将不得不等待更长的时间才能看到图像出现。
Everything depends on the context. Like with CSS for desktop browsers, there are situations where using pixels is not a good idea (for example mostly for font sizes), and there are situations where pixels are still very useful (for example fixed layout).
In general, avoid using pixels every-time you don't need to. For example, there is no reason to do it for fonts: it's not you, but the user who chooses if the font must be big on a high-res screen or not. Using percentages also helps you somehow to remember that a piece of text can never have an exact width and height, and force you to adapt your design.
Now, sometimes, for cost or other reasons, you have to do fixed layouts, or at least some parts of a page, associating images and text, have to be fixed in size. In this case, there is nothing wrong to use pixels. If I have a
<div/>
with some text inside and a pretty 200×100px background, the most obvious thing is to set the width and the height of this<div/>
to 200 and 100 pixels.IMHO, you never should do that. The size of an image is purely a layout/design thing, so it has nothing to do with HTML, but with CSS.
Do you have to specify the size of an image in CSS? If you want your image to be displayed 100%, than no, you don't have to: this is by default in every browser. If you want to scale it down and, for some reasons, you can't scale the image itself than save the scaled image on server, than yes, you may want to specify the size of the image.
Remember than sending a big image and scale is down on client side is always a bad idea. The visual quality might be affected, and the client will have to wait more to see the image appear.
实际上,我建议针对浏览器和移动设备使用不同的 CSS 文件(有时还使用不同的模板)。移动设备不仅仅是一个较小的浏览器,它还是一种根本不同的用户体验。
至于像素问题,我倾向于在基本 CSS 规则中使用像素,然后在其他地方使用 % 或 em,以便事物一起缩放。它并不总是按照我想要的方式工作,但它通常允许在开发过程中进行大量调整。
Actually, I recommend using different CSS files (and sometimes different templates) for browsers vs. mobile. Mobile isn't just a smaller browser, it is a fundamentally different user experience.
As for the pixel issue, I tend to use pixels in my base CSS rules and then use % or em's everywhere else so that things scale up and down together. It doesn't always work the way I would like, but it normally allows a lot of tweaking during development.