响应式布局

最新推荐文章于 2025-05-12 13:02:55 发布

原创最新推荐文章于 2025-05-12 13:02:55 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

183 篇文章

订阅专栏

css

37 篇文章

订阅专栏

博客提及CSS相关注意事项，指出1个CSS像素等于2个物理像素，并给出了示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//必须先加载此meta
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
//共同的css样式
<link rel="stylesheet" href="./css/common.css" />
//指大于500px宽度时调用desktop.css样式
<link media="(min-width:500px)" rel="stylesheet" href="./css/desktop.css" />
//指小于500px时调用mobile.css样式
<link media="(max-width:500px)" rel="stylesheet" href="./css/mobile.css" />

css注意
1个css的像素=2个物理像素

demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="./css/common.css" />
    <link media="(min-width:500px)" rel="stylesheet" href="./css/desktop.css" />
    <link media="(max-width:500px)" rel="stylesheet" href="./css/mobile.css" />
    <style>
    /*  checkbox自带的伪类*/
            #checkd:checked ~ p{
                display: none;
            }
            #checkd{
                display: none;
            }
    </style>
</head>
<body>
    <!--for属性绑定对应的id，表示绑定作用-->
    <label for="checkd">菜单</label>
    <input id="checkd" type="checkbox" />
    <p>aaaa</p>
</body>
</html>