CSS响应式

最新推荐文章于 2024-05-14 22:10:55 发布

LEIQINGQI

最新推荐文章于 2024-05-14 22:10:55 发布

阅读量660

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/LEIQINGQI/article/details/81415227

版权

CSS 响应式设计CSS 响应式设计Viewport设置Viewport网格视图媒体查询窗口小于500px，横屏图片添加图片背景图片背景-简写属性不同设备显示不同的图片HTML 5 picture 元素视频widthmax-width属性Bootstrap自己实现使用bootstrapViewport...

摘要由CSDN通过智能技术生成

CSS 响应式设计

CSS 响应式设计

Viewport

viewport 是用户网页可视区域

设置Viewport

width：控制viewport 大小，可以指定一个值（600px），或特殊的值，如：device-width为设备的宽度
height：高度
initial-scale：初始缩放比例，也就是页面第一次load时候缩放比例
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

网格视图

很多网页是按列来布局的，通常是12列，宽度100%，在浏览器窗口大小调整时自动伸缩。

确保所有的HTML 元素都有box-sizing 属性且设置为border-box。

* {box-sizing: border-box; }
12列网格系统可以更好的控制响应式网页

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    * {
        box-sizing: border-box;
    }
    .row:after {
        content: "";
        clear: both;
        display: block;
    }
    [class*="col-"] {
        float: left;
        padding: 15px;
    }
    .col-1 {
    width: 8.33%;}
    .col-2 {
    width: 16.66%;}
    .col-3 {
    width: 25%;}
    .col-4 {
    width: 33.33%;}
    .col-5 {
    width: 41.66%;}
    .col-6 {
    width: 50%;}
    .col-7 {
    width: 58.33%;}
    .col-8 {
    width: 66.66%;}
    .col-9 {
    width: 75%;}
    .col-10 {
    width: 83.33%;}
    .col-11 {
    width: 91.66%;}
    .col-12 {
    width: 100%;}

    html {
        font-family: "Lucida Sans", sans-serif;
    }
    .header {
        background-color: #9933cc;
        color: #ffffff;
        padding: 15px;
    }
    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li {
        padding: 8px;
        margin-bottom: 7px;
        background-color :#33b5e5;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    .menu li:hover {
        background-color: #0099cc;
    }
</style>
</head>
<body>

    <div class="header">
        <h1>Chania</h1>
    </div>

    <div class="row">

        <div class="col-3 menu">
            <ul>
                <li>The Flight</li>
                <li>The City</li>
                <li>The Island</li>
                <li>The Food</li>
            </ul>
        </div>

最低0.47元/天解锁文章

LEIQINGQI

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS响应式

CSS 响应式设计CSS 响应式设计Viewport设置Viewport网格视图媒体查询窗口小于500px，横屏图片添加图片背景图片背景-简写属性不同设备显示不同的图片HTML 5 picture 元素视频widthmax-width属性Bootstrap自己实现使用bootstrapViewport...
复制链接

扫一扫