现在的位置: 首页 > 综合 > 正文

How to design web pages that adapt to media browser size?

2018年06月07日 ⁄ 综合 ⁄ 共 538字 ⁄ 字号 评论关闭
/* Mobile Layout: 480px and below. */

    .gridContainer {
     margin-left: auto;
     margin-right: auto;
     width: 88.626%;
     padding-left: 1.1869%;
     padding-right: 1.1869%;
    }

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
    .gridContainer {
    width: 91.4836%;
    padding-left: 0.7581%;
    padding-right: 0.7581%;
   }

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and
Tablet Layout. */

@media only screen and (min-width: 769px) {
    .gridContainer {
    width: 88.826%;
    max-width: 1232px;
    padding-left: 0.5869%;
    padding-right: 0.5869%;
    margin: auto;
   }

}

抱歉!评论已关闭.