JavaScript - 如何设置按钮的宽度/位置百分比？

Question

我需要设置页面中元素的位置/大小，以百分比表示移动设备旋转...

我试过了：

frame.width = 30%;
button.width = 50%;

Answer 1

专家Chris Coyier就如何根据媒体查询对设备方向进行分类提供了很好的建议。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

Here is the article

这是新兴的响应式网页设计领域的一个关键主题。

这是一个简单的例子：

<style>
    /* iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
         .frame{width : 30%;}
         .button{width : 50%;}
    }
</style>

或者，包含在单独的css文件中：

<link rel="stylesheet" href="./responsiveness.css"> 

好问题。希望有所帮助。