前端之我的响应式布局实践

目标

素材

素材

正常布局流

将素材代码导入编辑器后, 如下:

对素材的解读

<style>
/* 第一步 -- 正常布局流 
--------------------------------------------------*/


/* 白色背景, 黑色字体,外边距为零内容完美贴合窗口, 
字体大小1.2em = 19.2px, 行高1.2, 字体样式*/

body {
    background-color: #fff;
    color: #333;
    margin: 0;
    font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}


/* 响应式图片,可小不可大,设置为块元素独立一行 */

img {
    max-width: 100%;
    display: block;
}


/* 相对正文两倍大小, 内边距上下50px左右20px, 水平居中,最大宽度980px */

.logo {
    font-size: 200%;
    padding: 50px 20px;
    margin: 0 auto;
    max-width: 980px;
}

.grid {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 980px;
}


/* 导航栏黑色背景,内边距8px */

nav {
    background-color: #000;
    padding: .5em;
}


/* 取消内外边距, 取消列表默认样式 */

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* 取消链接下划线 */

nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
}


/* 图片无间隔,取消列表默认样式 */

.photos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature {
    width: 200px;
}
</style>

展示

添加一下样式:

<style>
/* 响应式布局 */

@media screen and (max-width:980px) {
    nav {
        text-align: center;
    }
}

@media screen and (min-width:980px) {
    /* 导航栏
-------------------------------------------------- */
    nav ul {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-flow: row wrap;
    }
    nav li {
        flex: 1 100px;
    }
    /* 主要内容的2列布局
-------------------------------------------------- */
    .grid {
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 5px;
    }
    /* photos */
    .photos {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
</style>

效果:

1. 手机
   

2. 浏览器:
   
   
   
   网页实例: 牛刀小试 – 响应式布局