Discuz! X3.4默认模板自适应手机与pc的方法

以下是详细讲解“Discuz! X3.4默认模板自适应手机与PC的方法”的完整攻略:

准备工作

首先,你需要确保你的Discuz! X3.4版本已经安装好,并且是默认模板。

在进行修改之前,最好先备份一下原模板,以防修改错误导致网站无法正常访问。

修改方法

  1. 打开模板目录

你需要进入Discuz! X3.4的模板目录,在default目录下找到mobile和pc两个子目录。

  1. 修改CSS样式

在这两个子目录里面,你需要找到common.css文件,在里面加入以下代码:

/* 手机端和PC端通用样式 */
@media screen and (max-width: 767px) {
  /* 手机端样式 */
}
@media screen and (min-width: 768px) {
  /* PC端样式 */
}

这段代码使用了CSS3的媒体查询功能,根据屏幕宽度来动态改变样式。

在上面的代码中,max-width: 767px表示屏幕宽度小于等于767px,为手机端,可在@media内编写手机端样式;min-width: 768px表示屏幕宽度大于767px,为PC端,可在@ media内编写PC端样式。

下面是示例,假设我们要为手机端的页面中的标题设置字体大小为16px,为PC端的页面中的标题设置字体大小为24px,可以写入以下代码:

/* 手机端样式 */
h1 {
    font-size: 16px;
}
/* PC端样式 */
@media screen and (min-width: 768px) {
    h1 {
        font-size: 24px;
    }
}

此外,你还可以使用其他CSS样式控制网页的显示效果。

  1. 修改HTML结构

在mobile和pc子目录下分别修改各自的模板文件,比如:header.htm、footer.htm、nav.htm等。

在修改时,建议将通用HTML标签如header、footer、nav等写成通用模板,例如:

<!-- 通用头部公共部分 -->
<header>
    <div class="logo"></div>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>
  1. 单独设置样式

如有存在于mobile和pc之间样式差异很大的标签,可以单独处理,例如:

<!--只修改手机端样式-->
<a href="#" class="button button_red">点击</a>

<!--只修改PC端样式-->
<a href="#" class="button button_blue">点击</a>
  1. 测试

修改完成后,可以使用开发者工具进行模拟测试,确认修改效果是否符合预期。

示例

示例1:在网站正文上方添加一个广告

我们先在common.css文件中添加以下样式代码:

/* 手机端和PC端通用样式 */
@media screen and (max-width: 767px) {
  /* 手机端样式 */
  section {
    padding-top: 80px;
  }
}
@media screen and (min-width: 768px) {
  /* PC端样式 */
  section {
    padding-top: 120px;
  }
}

以上代码为网页正文(即section标签)添加了上边距,分别设为80px和120px。

接着,我们打开网站的模板首页,查找到网站正文对应的HTML结构。

我们在网站正文上方添加了一个广告,例如下面的代码:

<!-- 广告 -->
<div class="ad">
    <img src="images/ad.jpg" alt="">
</div>

<!-- 网站正文 -->
<section>
    <h1>网站正文</h1>
    <p>这里是网站正文内容……</p>
</section>

此时网站的广告已经可以在网站正文上方正常显示,并且在手机和PC两个端口都可以自动适应。

示例2:主页背景图像

在移动端和桌面端上,为我们网站的主页添加一个全屏背景图像,可以使用以下示例代码:

html,body{
    height: 100%; /* 设置html、body元素的高度为100% */
}

@media (min-width: 768px){
    /* PC端使用大尺寸背景图片 */
    html,body{
        background-image: url(images/bg-1440.jpg);/* 宽度1440px的背景图片 */
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

@media (max-width: 767px){
    /* 移动端使用小尺寸背景图片 */
    html,body{
        background-image: url(images/bg-360.jpg);/* 宽度360px的背景图片 */
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

以上代码实现了移动端和桌面端背景图像自适应,其中,@media媒体查询用于检测设备是否满足某些条件,比如屏幕尺寸。

正如上述代码所示,在PC端上,背景图片背景尺寸为1440px,而在移动端上,尺寸为360px。背景图像在水平和垂直方向上都居中,不会随着浏览器大小变化而失去比例。

当背景图像添加完成后,网站将自动适应移动端和桌面端。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Discuz! X3.4默认模板自适应手机与pc的方法 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • CSS中Single Div 绘图技巧的实现

    CSS中的Single Div绘图技巧是一种极具创意和技巧性的CSS绘图方法,是利用一个元素(div)的伪元素(::before和::after)来绘制出复杂的图形。以下是Single Div绘图技巧的实现攻略: 1. 了解CSS中伪元素的使用方法 在CSS中,伪元素如::before和::after可以用来在一个元素前面或后面插入内容,这些内容与元素的内容…

    css 2023年6月10日
    00
  • JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )

    这个 JavaScript 表达式看起来很神秘,实际上是一个字符串的拼接。其中 __ = !$ + $,那么 __$ = true + $。 整体来看,这个表达式最终拼接出来的就是 JavaScript 这个字符串。 拆解一下,就是: __$[+$],这个 $ 表示字符串末尾的一个字符,+ 的作用是将字符串的末尾字符转化为数字类型。而这个数字,正好就是 1,…

    css 2023年6月9日
    00
  • css 圆角边框

    当你想要为一些元素添加圆角边框时,可以使用 CSS 的 border-radius 属性来完成。这个属性可以让你在一次声明中设置四个边框各自不同的半径,或者将四个边框的半径设成相同的值。以下是一份关于如何制作 CSS 圆角边框的完整攻略: 基本语法 要使用 border-radius 属性,必须将其应用于需要添加圆角边框的元素。属性值可以使用下面的基本语法:…

    css 2023年6月10日
    00
  • 第一次动手实现bootstrap table分页效果

    下面是实现 Bootstrap Table 分页效果的攻略: 准备工作 在开始前,我们需要先引入 Bootstrap 和 jQuery,可以在头部加入以下代码: <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/…

    css 2023年6月10日
    00
  • JavaScript实现表单验证

    JavaScript实现表单验证是网站开发中非常常见的任务之一,它可以确保用户输入的信息符合预期,提高网站的可靠性和稳定性。下面将详细介绍该任务的完整攻略: 1. 确定需要验证的表单元素 在进行表单验证之前,我们需要明确需要验证的表单元素。一般来说,输入框、文本框、下拉框等表单元素都需要进行验证。在明确需要验证的表单元素之后,我们可以给它们添加合适的ID和c…

    css 2023年6月10日
    00
  • Flex布局做出自适应页面(语法和案例)

    下面给您详细讲解“Flex布局做出自适应页面(语法和案例)”的完整攻略。 一、什么是Flex布局 Flexbox是Flexible Box的缩写,意为“弹性布局”,用来为盒装模型提供最大的灵活性。在Flex布局中,父元素称为容器(container),子元素称为项目(item)。Flex布局制定了容器内各个子元素的排列方式、对齐方式等一系列规则。它可以让容器…

    css 2023年6月9日
    00
  • CSS外边距设置方法详解

    CSS外边距(margin)指元素边框(border)与相邻元素或包含元素之间的距离。外边距可以用来控制元素之间的间隔以及元素相对于浏览器窗口或包含元素的位置。 外边距可以通过四个方向分别设置,分别为margin-top、margin-right、margin-bottom和margin-left。也可以使用简写属性margin,按照顺序设置上、右、下、左四…

    Web开发基础 2023年3月20日
    00
  • Ant Design中使用css切换的问题及解决

    Ant Design是一套基于React组件化开发的UI框架,提供了众多的可复用、易于维护的组件,方便快速开发Web应用。在Ant Design中,使用CSS切换的问题比较普遍,主要是由于Ant Design采用了Less预处理器,导致CSS文件中的变量和样式名不易于直接修改。下面,我们将详细讲解Ant Design中使用CSS切换的问题及解决方案。 问题描…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部