CSS 尺寸最佳实践 - 元素高度/宽度（像素或%）

发布于 2024-11-03 08:26:29 字数 450 浏览 3 评论 0原文

我的问题是关于设置元素大小的最佳方法，我应该将其设置为 % 还是 px ？

我正在工作中开发一个网络应用程序，并且以百分比形式设置每个高度/宽度。这是最好的方法吗？

我所说的“最好”是指在各种尺寸和分辨率的显示器以及跨浏览器上正确显示。

示例代码：

html
{
    height:100%;
}

body
{
    height:100%;
}

div.title
{
    background-color:Gray;
    padding:0;
    margin:0;
    float:left;
    width:100%;
}

form#ct101
{
    height:100%;
}

它一直持续下去。

谢谢

原文

My question is about the best way to set elements sizes, should i set it in % or in px?

I'm doing a web app in my job, and i'm setting every height/width in percentage. Is this the best approach?

By best i mean correctly displaying on a variety of monitors sizes and resolution, and cross-browser.

Sample code:

html
{
    height:100%;
}

body
{
    height:100%;
}

div.title
{
    background-color:Gray;
    padding:0;
    margin:0;
    float:left;
    width:100%;
}

form#ct101
{
    height:100%;
}

And it goes on all the way down.

Thank you

分享到QQ

分享到微博

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

发布评论

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

像极了他 2024-11-10 08:26:29

这实际上取决于您想要做什么。例如，对于内容标签，我通常喜欢使用 80-95%。如果我要制作登录屏幕，我会使用 30-40% 或固定宽度，具体取决于页面其余部分的外观。

回复收藏 0 原文

七分※倦醒 2024-11-10 08:26:29

我知道这个问题很老了，但在不相关的谷歌搜索中出现了未解答的问题...

我会将高度保留在 100%，只要表单是屏幕上唯一的东西就可以了..这将真正独立于你的应用程序。另一方面，宽度...

使用@media，您可以为移动设备和桌面用户设计表单。

示例：

@media screen and (max-width: 645px) {
form#ct101 {
width: 100%; 
} }
@media screen and (min-width: 646px) {
form#ct101 {
width: 600px; 
} }

这将使您的表单填满移动设备上的屏幕，以便它们有最大空间来查看它们，然后使它们在显示器上不那么大，以便表单输入不长。理论上，表单字段越长，填写的时间就越长，并且会从表单上掉落/弹起。

I know this question is old, but unanswered came up in an unrelated google search...

I would leave the height at 100% that is fine as long as the form is the only thing on the screen.. that will really be independent of your app. The width, on the other hand...

Using @media you can design your forms for mobile and for people on the desktop.

example:

@media screen and (max-width: 645px) {
form#ct101 {
width: 100%; 
} }
@media screen and (min-width: 646px) {
form#ct101 {
width: 600px; 
} }

That would make your forms fill up the screen on mobile devices so they have the max space to see them, and then keep them not so large on monitors so the form inputs aren't long. In theory the longer the form fields, the longer it is thought to fill out, and will experience fall off/bouncing from the form.

回复收藏 0 原文

~没有更多了~