我应该使用 % 还是 'px'在 HTML 中

发布于 2025-01-06 20:52:35 字数 188 浏览 0 评论 0原文

无论是 HTML、XHTML 还是 HTML5,您都会发现到处都是令人讨厌的百分比。然而……我看到很多网站都不敢靠近它们。然而大学总是鼓励我使用它们。

那么我应该使用哪个?哪一个会带来更好的网站设计,为什么?

我知道要避免使用高度,尽管如果我想使用百分比,HTML5 确实不喜欢我不指定高度。

感谢您抽出时间阅读。

Regardless of whether it is HTML, XHTML or HTML5 you find those annoying percentages littered throughout the place. Yet... I see an awful lot of websites dare not go near them. Yet I was always encouraged through uni to use them.

So which should I be using? Which would lead to better site design and why?

I'm aware to avoid the use of height although HTML5 really doesn't like me not specifying height if I want to use percentages.

Thanks for taking the time to read.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

好久不见√ 2025-01-13 20:52:35

这实际上取决于您想要构建什么。
有时我需要建立一个可供有某些残障人士阅读的网站。例如,如果老年人也访问您的网站,那么使用 % 是很好的选择,这样他们就可以放大您的页面,并且布局仍然看起来很漂亮。

固定设计布局固定设计布局具有特定的宽度,并且
无法缩放以适应浏览器窗口。利用它的网站可以
向左对齐,居中对齐,甚至向右对齐,如下所示
当需要时。

固定布局的优点:通过固定设计布局,您可以控制
网络上元素的行长、流程和位置
页。设计师有固定的工作空间和线条长度
可以轻松指定文本的位置和图像的位置。

固定布局的缺点:固定设计布局往往会留下很多
在高屏幕上查看时,设计两侧的空白区域
决议。这使网页的大小相形见绌,并给出了
它给人的印象是它漂浮在屏幕上。

流体布局流体设计布局使用百分比而不是像素来
定义它们的宽度并填充整个浏览器窗口。他们是
也称为固定或动态设计。

流体布局的优点:流体设计的主要优点之一
布局是它们的辅助功能。他们迎合了更多数量的
用户。这是因为,无论屏幕分辨率或
用户的设备,固定的设计布局适应得更好。它利用
整个浏览器窗口展开。这使得面积最大化
如需显示内容,更多信息可参见一
去。因此,窗口屏幕上没有空白区域。这是一个
与留下大量内容的固定布局相比,这是更好的选择
空白区域。

It really depends on what you do you want to build up.
Sometimes I need to build a website which could be read by people with certain disabilities. If for example also older people visit your site its good to use % so that they could zoom in your page and the layout still looks pretty.

Fixed Design Layouts Fixed design layouts have a specific width and do
not scale to fit the browser window. Websites that make use of it can
be aligned to the left, centre or even aligned to the right as and
when required.

Benefits of Fixed layouts: With fixed design layouts you have control
over the line length, flow and placement of the elements on the web
page. The designer has a fixed space to work with and the line lengths
of the text and the placement of images can be designated easily.

Drawbacks of Fixed layouts: Fixed design layouts tend to leave lots of
empty space on either side of the design when viewed on high screen
resolutions. This dwarfs the size of the web page and gives an
impression that it is floating on the screen.

Fluid Layout Fluid design layouts use percentages instead of pixels to
define their width and they fill the entire browser window. They are
also called fixed or dynamic designs.

Benefits of Fluid layouts: One of the major benefits of fluid design
layouts is their accessibility features. They cater to more number of
users. This is because, whatever may be the screen resolution or
device of the user, fixed design layouts adapt better. It makes use of
the entire browser window by spreading out. This maximizes the area
for the content to e displayed and more information can be seen at one
go. Therefore, there is no empty space on the window screen. This is a
better bet as compared to fixed layouts that leave a great deal of
empty space.

勿忘初心 2025-01-13 20:52:35

对于字体,如果您不希望修复 Internet Explorer 中的字体大小,则应使用百分比(或 em、rems)。如果您使用像素,则在浏览器设置中更改默认字体大小的 Internet Explorer 用户将不会看到字体增大/减小。因此,这可能会使该浏览器中的用户难以阅读您的文本。

Dan Cederholm 的Bulletproof Web Design 的第一章是一个很好的资源。

对于布局,使用百分比或 em 将使您的设计更灵活地更改字体大小/本地化等。本书也对此进行了介绍。

For fonts, you should use percentages (or em's, or rems) if you don't wish to fix the font size in Internet Explorer. If you use pixels, then users of Internet Explorer who change their default font size in their browser settings won't see the fonts increase/decrease. So this makes your text potentially less readable for users in that browser.

A great resource for this is the first chapter of Dan Cederholm's Bulletproof Web Design.

For layout, using percentages or em's will make your design more flexible to changing font sizes/localization etc. This is also covered in the book.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文