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

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

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

在这里插入图片描述

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


<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 Labdiv>
            
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a th:href="@{/LidarLab/home}">homea>li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/people}">peoplea>li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/publications}">publicationsa>li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/research}">researcha>li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/gallery}">gallerya>li>
                <li class="layui-nav-item"><a th:href="@{/LidarLab/aboutUs}">about usa>li>
            ul>
        div>
    div>
    <div class="mobile">
        <ul class="layui-nav">
            <li class="layui-nav-item layui-this" style="width: 100%;">
                <a href="#">Lidar Laba>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/LidarLab/home}">homea>dd>
                    <dd><a th:href="@{/LidarLab/people}">peoplea>dd>
                    <dd><a th:href="@{/LidarLab/publications}">publicationsa>dd>
                    <dd><a th:href="@{/LidarLab/research}">researcha>dd>
                    <dd><a th:href="@{/LidarLab/gallery}">gallerya>dd>
                    <dd><a th:href="@{/LidarLab/aboutUs}">aboutUsa>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的页面这样写:


<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了。

呵,前端可真是神奇!

你可能感兴趣的:(Spring,Boot)