以下是详细讲解“Discuz! X3.4默认模板自适应手机与PC的方法”的完整攻略:
准备工作
首先,你需要确保你的Discuz! X3.4版本已经安装好,并且是默认模板。
在进行修改之前,最好先备份一下原模板,以防修改错误导致网站无法正常访问。
修改方法
- 打开模板目录
你需要进入Discuz! X3.4的模板目录,在default目录下找到mobile和pc两个子目录。
- 修改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样式控制网页的显示效果。
- 修改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>
- 单独设置样式
如有存在于mobile和pc之间样式差异很大的标签,可以单独处理,例如:
<!--只修改手机端样式-->
<a href="#" class="button button_red">点击</a>
<!--只修改PC端样式-->
<a href="#" class="button button_blue">点击</a>
- 测试
修改完成后,可以使用开发者工具进行模拟测试,确认修改效果是否符合预期。
示例
示例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技术站