html - 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) {

这是文章。

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

这是一个简单的例子：

<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"> 

好问题。希望有帮助。