web页面同时适配移动端和桌面端

最新推荐文章于 2024-06-25 21:32:46 发布

dzydzy7

最新推荐文章于 2024-06-25 21:32:46 发布

阅读量3.1k

点赞数 1

分类专栏： Spring Boot

本文链接：https://blog.csdn.net/dzydzy7/article/details/105336153

版权

Spring Boot 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我在写一个页面的时候，写一个header，其中的每个元素都是固定宽度的，所以在宽度较窄的手机端会出现导航栏换行的现象，为了解决这个问题，我学习了一个新的前端技巧：使用link的media属性。

电脑端页面：每个元素都是150px

在这里插入图片描述

然后我们编写公用的header模板(使用了thymeleaf模板引擎)：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>

</head>
<body>
<div th:fragment="header">
    <div class="layui-layout layui-layout-admin desktop">
        <div class="layui-header">
            <div class="layui-logo">Lidar Lab</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a th:href="@{/LidarLab/home}">home</a></li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/people}">people</a></li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/publications}">publications</a></li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/research}">research</a></li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/gallery}">gallery</a></li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/aboutUs}">about us</a></li>
            </ul>
        </div>
    </div>
    <div class="mobile">
        <ul class="layui-nav">
            <li class="layui-nav-item layui-this" style="width: 100%;">
                <a href="#">Lidar Lab</a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/LidarLab/home}">home</a></dd>
                    <dd><a th:href="@{/LidarLab/people}">people</a></dd>
                    <dd><a th:href="@{/LidarLab/publications}">publications</a></dd>
                    <dd><a th:href="@{/LidarLab/research}">research</a></dd>
                    <dd><a th:href="@{/LidarLab/gallery}">gallery</a></dd>
                    <dd><a th:href="@{/LidarLab/aboutUs}">aboutUs</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>

</body>
</html>

可以看到其中有两个div，一个是横向排列的导航栏，一个是纵向排列的导航栏，class属性分别是desktop和mobile。

然后我们去编写两个样式表文件：

第一个：headerStyle.css:

/* 让手机端是要的导航栏不显示 */
.mobile {
    display: none;
}

.mobile * {
    display: none;
}

/* 以下是其他覆盖layui的样式 */
.layui-nav * {
    font-size: 16px;
}

.layui-nav .layui-nav-item a {
    color: #0C0C0C; /* 导航栏字体颜色 */
}

.layui-nav .layui-nav-item a:hover {
    color: #007DDB; /* 导航栏字体颜色 */
}

.layui-layout-admin .layui-header {
    background-color: #f2f2f2;  /* 导航栏背景颜色 */
}

.layui-nav .layui-nav-item {
    width: 150px;
    text-align: center;
}

.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
    background-color: #1E9FFF;  /* 覆盖时底下横杠的颜色 */
}

第二个：headerMobile.css

/* 让电脑端的导航栏不显示 */
.desktop {
    display: none;
}

.desktop *{
    display: none;
}
/* 移动端偷懒用了layui本来的样式 */

然后我们要做的就是在移动端只使用headerMobile.css，桌面端只使用headerStyle.css，然后通过在chrome上调整浏览器宽度看出，在宽度小于1163px的时候，就会显示不正常，所以我们设置一个保守一点的阈值：1180，也就是宽度比1180窄就用headerMobile.css，反之就用headerStyle.css。

所以我们在使用这个header的页面这样写：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <!-- 以下四行都是必须的 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet">
    <link th:href="@{/styles/headerStyle.css}" rel="stylesheet" media="screen and (min-width: 1180px)">
    <link th:href="@{/styles/headerMobile.css}" rel="stylesheet" media="screen and (max-width: 1179px)">
</head>
<body>
	<div th:replace="common/header::header"></div>
</body>
</html>

然后部署上线，发现完全没有变化，咋回事呢？原来是我的浏览器缓存了我之前引用的css，使我的修改没有生效，清空浏览器缓存！正常运行！.把浏览器调窄后的效果：

在这里插入图片描述

就变成了下拉框式的nav，而之前桌面端的导航栏就不见了，这个样式也挺好看的嘛，就这样吧，不改css了。

呵，前端可真是神奇！

dzydzy7

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
web页面同时适配移动端和桌面端

我在写一个页面的时候，写一个header，其中的每个元素都是固定宽度的，所以在宽度较窄的手机端会出现导航栏换行的现象，为了解决这个问题，我学习了一个新的前端技巧：使用link的media属性。电脑端页面：每个元素都是150px然后我们编写公用的header模板(使用了thymeleaf模板引擎)：<!DOCTYPE html><html lang="en" xmlns:...
复制链接

扫一扫

专栏目录