[英]Guidelines for resizing and adjusting for mobile devices using javascript
[英]Resizing Elements For Mobile Devices
我知道这可能是一个非常常见的问题,但对 HTML、CSS、JS 来说是个新问题。 我真的想要一个直接的答案,所以如果这是重复的,我很抱歉。
我目前正在研究一个 wordle 克隆,但我在调整移动设备的大小方面遇到了问题。 在我的电脑上,尺码看起来很完美。 但是,当我在手机上访问它时,底部的键盘似乎非常小。
如果我能得到一些帮助来解决这个问题,那就太好了! 谢谢!
这是我的相关 HTML 代码:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale =1, user-scalable=no">
这是我所有相关的 CSS 代码:
.keyboard-row {
justify-content: center;
align-items: center;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.key-tile {
/* Box */
border: 1px solid lightgray;
width: 5%;
height: 40px;
margin: 1px;
/* Text */
font-size: auto;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
尝试在您的 css 中使用rem单位而不是像素(px) ,同时将您的键和文本设置为 rem 和 em 有助于相对于您的父容器进行调整并有助于使项目响应。 或者您也可以使用媒体查询来解决您的问题。 希望这可能有助于解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.