[英]Unsure whether to use Flexbox, tables, or rows and columns
So I am trying to make a controller for an RC car that will work on any size screen, I plan on having the page of the app have up, down, left, right, and in the middle a stop, so sort of like a tv remote control look. 因此,我正在尝试制作一款适用于任何尺寸屏幕的RC汽车控制器,我计划让该应用程序的页面上下左右分别在中间停下来,就像电视遥控器的外观。 I am newer to html and css and am just unsure what would be the best way to go about doing this.
我是html和css的新手,只是不确定执行此操作的最佳方法是什么。 I want the buttons to autofit to the screen and fill it.
我希望按钮自动适应屏幕并填充它。 Any advice would be great.
任何建议都很好。
Flexbox support isn't great ( http://caniuse.com/#search=flexbox ). Flexbox的支持不是很好( http://caniuse.com/#search=flexbox )。 Tables are supported in all browsers, however, it really isn't the right solution;
所有浏览器都支持表,但是,这实际上不是正确的解决方案。 tables are designed for charts, not layout.
表格是为图表而不是布局而设计的。
The best solution is to use responsive design techniques (min-width, max-width, % widths, etc) with divs. 最好的解决方案是对div使用自适应设计技术(最小宽度,最大宽度,%宽度等)。 This should be compatible in IE9+ and all modern browsers.
这应该与IE9 +和所有现代浏览器兼容。 See http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/ , http://www.sitepoint.com/common-techniques-in-responsive-web-design/ , or simply Google "Responsive Design" for more information.
见http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/ , http://www.sitepoint.com/common-techniques-in- active-web-design / ,或简单地使用Google“响应式设计”以获取更多信息。
I would use none of the above. 我不会使用以上任何一种。 I would use absolute positioning like this:
我会这样使用绝对定位:
.up, .down, .left, .right, .stop {
position: absolute;
width: 33.3%;
height: 33.3%;
}
.up {
top: 0%;
left: 33.3%
}
.right {
top: 33.3%;
left: 66.6%;
}
And so on. 等等。
This has the benefit of being compatible with every browser ever created by humans. 这具有与人类曾经创建的每个浏览器兼容的好处。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.