我正在为朋友创建一个网站,并且对我来说是严格的练习。到目前为止,我已经获得了适合任何屏幕的标志,但现在我正在添加按钮,以便用户可以浏览网站。当放大或缩小按钮时,遍布整个地方。我正在使用外部CSS工作表来帮助格式化我的HTML。这是我的CSS3代码
/* W & W Hydrographics, LLC. */
/* Robert W. Anderson HTML 5.0 */
.mybutton {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 30px/35px Arial, sans-serif;
box-shadow:#000 4px 4px 5px;
}
/* Our Gallery */
.gallery {
position:absolute;
left:5%;
top:5%;
color: #F5DA62;
background: #3F403D;
}
/* Available Patterns */
.patterns {
position:absolute;
left:300px;
top:230px;
color: #F5DA62;
background: #3F403D;
}
/* Contact Us */
.contact {
position:absolute;
left:650px;
top:230px;
color: #515151;
color: #F5DA62;
background: #3F403D;
}
body {
background-size: 100%
}
答案 0 :(得分:0)
您可以使用CSS3查找屏幕的宽度并调整按钮的大小(同样,根据大小)。这是一个示例的一个小解释,只是为了让您可以unserstand.Suppose我有一个按钮与id #button,宽度为300像素 -
#button{
width:300px;
}
如果我想在手机中将宽度更改为100px(手机平均宽度为470px;)我可以这样做 -
@media (max-width: 470px) {
#button{
width:300px;
}
}
您可以使用相同的逻辑来同时调整其他元素甚至多个元素的大小 -
@media (max-width: 470px) {
#button{
width:300px;
}
#button2{
width:300px;
}
#someelement{
color:#C30;
}
}
如果您不理解我的部分答案,请发表评论。我可以自由地回答更多疑问。