在HTML5中创建的按钮适合任何屏幕分辨率

时间:2014-04-29 04:31:56

标签: css3

我正在为朋友创建一个网站,并且对我来说是严格的练习。到目前为止,我已经获得了适合任何屏幕的标志,但现在我正在添加按钮,以便用户可以浏览网站。当放大或缩小按钮时,遍布整个地方。我正在使用外部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%

}

1 个答案:

答案 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;
       }

                               }

如果您不理解我的部分答案,请发表评论。我可以自由地回答更多疑问。