在HTML中，表格和表格内容应该根据设备屏幕调整大小

Table and table content should resize in HTML according to device screen

本文关键字：表格 屏幕 调整 HTML      更新时间：2023-09-26

我是HTML新手，正在设计一个从目录中获取文件的页面。另一列包含用于选择文件的复选框。当我从移动浏览器打开页面时，表的大小没有改变，因此我需要手动最大化表。在HTML中有什么方法可以根据浏览器大小渲染表格吗?我试着在谷歌上搜索同样的内容，但一无所获。如果有人能给我重新介绍一下这个概念就太好了。提前感谢!

请添加代码…如果我们不能看到你现在的情况，就没有确切的答案。你可以添加

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

到你的头标签。

在你的CSS文件中:

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-table{
        [CSS CODE];
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-table{
        [CSS CODE];
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-table{
        [CSS CODE];
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-table{
        [CSS CODE];
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-table{
        [CSS CODE];
    }
}

你正在寻找的是所谓的响应式网页设计。有几种可能的方法可以做到这一点。你可以根据你的需要选择

  1. 您可以使用媒体查询，其中为不同的屏幕定义不同的样式表。这是目前使用最多的方法。
    先睹为快:http://css-tricks.com/css-media-queries/和https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

  2. 你可以使用viewport meta标签。
    先睹为快:https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

  3. 你可以用%(流体响应)来设计所有东西，但这部分非常棘手。根据我的经验，我可以说设计一个完整的

我建议你学习媒体查询。

相关文章：