本文共 3217 字,大约阅读时间需要 10 分钟。
css 响应式
A few days ago I got a warning from the Google Search Console. It detected a Mobile Usability issue on a page where I have a big table.
几天前,我从Google Search Console收到警告。 它在我有一张大桌子的页面上检测到移动可用性问题。
This is the table that gave me the problem:
这是给我问题的表:
On mobile, it rendered pretty poorly:
在移动设备上,它的渲染效果很差:
Not a nice user experience, and an error in the Google Search Console. If there’s something I don’t want is an error/warning in that place. Not when it’s something I can fix.
不好的用户体验,以及Google Search Console中的错误。 如果有什么我不想要的地方就是一个错误/警告。 当我可以解决时,不会。
Hugo, the static site generator I use, lets me inject CSS specific to a single page, simply by adding a <style>
tag into the markdown file. Handy.
Hugo是我使用的静态网站生成器,通过简单地在markdown文件中添加<style>
标记,我就可以注入特定于单个页面CSS。 便利。
So I started searching for a good way to make my table responsive. I came across this very nice article on CSS Tricks: . It’s from 2011, and still works fine!
因此,我开始寻找一种使表具有响应能力的好方法。 我在CSS技巧: 上看到了一篇非常不错的文章。 从2011年开始,仍然可以正常使用!
The trick is this: we want to make the table display as a block element rather than as a table in the traditional CSS sense. We hide all the table headings by moving them out of the view, and we insert a new block in the table, and each row will have its own set of headings, like this:
诀窍是这样的:我们希望使表格显示为一个块元素,而不是传统CSS意义上的表格。 我们通过将所有表头移出视图来隐藏所有表头,然后在表中插入一个新块,每一行将具有自己的一组表头,如下所示:
Here is the code that achieves the above design:
这是实现上述设计的代码:
@mediaonly screen and (max-width: 1500px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 200px; margin-left: 150px; } td:before { position: absolute; top: 12px; left: 6px; width: 200px; padding-right: 40px; white-space: nowrap; margin-left: -150px; } td:nth-of-type(1):before { content: "Option"; } td:nth-of-type(2):before { content: "Description"; } td:nth-of-type(3):before { content: "Type"; } td:nth-of-type(4):before { content: "Default";}}
The important things you’ll want to customize to make your own table responsive are the last 4 lines - you need to enter the title of each “column”, and you need to add more if you have more columns. Or remove them if you have less.
您需要自定义以使自己的表响应的重要事情是最后4行-您需要输入每个“列”的标题,并且如果您有更多的列,则需要添加更多。 或者,如果数量较少,请将其删除。
The other thing is the space that the new “headings” will take for each row. I added a 150px
margin, and you need to reference it 2 times: one as a margin-left: 150px
in the td
, and as a margin-left: -150px
in the td: before
.
另一件事是新的“标题”将占据每一行的空间。 我添加了一个150px
边距,您需要引用2次:一次是td
margin-left: 150px
, margin-left: -150px
是td: before
margin-left: -150px
td: before
。
Finally, you need to decide when this new layout kicks in. I made it active when the page is less than 1500px, because that table is huge. I could as well make this the default behavior rather than displaying the normal table on huge screens, but so far I think the problem is solved.
最后,您需要确定何时启动该新布局。当页面小于1500px时,我将其激活,因为该表很大。 我也可以将其设置为默认行为,而不是在大屏幕上显示普通表,但是到目前为止,我认为问题已解决。
I hope this helps.
我希望这有帮助。
翻译自:
css 响应式
转载地址:http://qtqgb.baihongyu.com/