网页设计daily study 01

最新推荐文章于 2025-06-30 00:36:34 发布

原创最新推荐文章于 2025-06-30 00:36:34 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

网页设计daily study 专栏收录该内容

2 篇文章

订阅专栏

响应式布局入门

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

核心-> media query 媒体查询根据最大最小宽度识别设备，采用不同css

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

使用设备的宽度作为视图宽度并禁止初始的缩放。

user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。

<link media = "(min-width: 500px)" rel="stylesheet" href="css/desktop.css">
<link media = "(max-width: 500px)" rel="stylesheet" href="css/mobile.css">

500px以上则采用desktop.css；500px以下则采用mobile.css。

此处的px为理想宽度，理想宽度=物理宽度与DPR计算结果：viewportsizes.com 可以查各设备的px

Media Query

让CSS更精确作用于不同的媒介类型和同一媒介的不同条件。

是在页面的头部<head></head>之间加上下面这句∶

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置∶

width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

通过checked伪类和label for实现菜单隐藏和显示

Check：

# trigger : not(checked) ~ .toggle-item{

display: block;

}

通过 :checked伪类选择器设置鼠标点击后的状态。

参考：https://juejin.im/entry/574e8d0e2e958a005e038297

Label : for 属性规定 label 与哪个表单元素绑定。

参考：http://www.w3school.com.cn/tags/att_label_for.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 理想宽度=物理宽度与DPR计算结果：viewportsizes.com 可以查各设备的px -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式页面</title>
    <link rel="stylesheet" href="css/common.css">
<!-- media query 媒体查询 根据最大最小宽度识别设备，采用不同css-->
    <link media = "(min-width: 500px)" rel="stylesheet" href="css/desktop.css">
    <link media = "(max-width: 500px)" rel="stylesheet" href="css/mobile.css">
</head>
<body>
    <div id = 'title'>
        <h1>响应式测试</h1>
    </div>
    <div id = 'side-bar'>
        <!-- label for 表示label与该Id对应标签联结 -->
        <label id = 'toggle' for="menu">菜单</label>
        <!-- 使用check选择器的checked伪类和display实现菜单单击时显示隐藏效果 -->
        <input id = 'menu' type="checkbox">
            <div class = "bar">
                <a  href="index1.html">主页</a>
                <a  href="index1.html">刷新</a>
                <a  href="index1.html">主页</a>
            </div>
    </div>
    <h5 id = "a1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro eius exercitationem consequatur, distinctio aut est autem vitae iure sed delectus velit. Animi vel quia hic! Iusto sapiente odio inventore doloremque ducimus debitis alias assumenda at perferendis ex iure, nostrum architecto vero quia totam placeat tenetur consequuntur earum. Accusamus, rerum voluptates!</h5>
    <hr>
    <h5 id = "a2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro eius exercitationem consequatur, distinctio aut est autem vitae iure sed delectus velit. Animi vel quia hic! Iusto sapiente odio inventore doloremque ducimus debitis alias assumenda at perferendis ex iure, nostrum architecto vero quia totam placeat tenetur consequuntur earum. Accusamus, rerum voluptates!</h5>
    <hr>
    <h5 id = "a3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro eius exercitationem consequatur, distinctio aut est autem vitae iure sed delectus velit. Animi vel quia hic! Iusto sapiente odio inventore doloremque ducimus debitis alias assumenda at perferendis ex iure, nostrum architecto vero quia totam placeat tenetur consequuntur earum. Accusamus, rerum voluptates!</h5>
</body>
</html>

效果图：