HTML元素在移动端和电脑端显示或不显示的两种设置方法

Posted 金蜘蛛网页设计器

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML元素在移动端和电脑端显示或不显示的两种设置方法相关的知识,希望对你有一定的参考价值。

我们在设计响应式网页时,有时会遇到电脑网页与移动网页显示差异很大的部分,一种简单的方法就是这部分分别设计,在不同设备下分别显示,即电脑端浏览器显示电脑网页部分,移动下显示移动网页部分,像解决导航条。本文介绍两种在金蜘蛛网页设计器中设计方法设置html元素在移动端和电脑端出现,非常简单。

1.“电脑网页”是指浏览器宽度大于等于1024时的显示状态,“移动网页”是指浏览器宽度小于1024时的显示状态。2.下面的设置例子我们将以面板(div)为例说明如何设置。

一、利用“位置、大小”的“移动网页不出现”和“电脑网页不出现”属性

“移动网页不出现”是说该元素在移动网页下不可见,电脑网页下可以见;“电脑网页不出现”是说该元素在电脑网页下不可见,在移动网页下可见。

面板1的设置如下:

HTML元素在移动端和电脑端显示或不显示的两种设置方法_网页制作

面板2的设置如下:

HTML元素在移动端和电脑端显示或不显示的两种设置方法_网页制作_02

当浏览器宽度大于1024时预览如下图:

HTML元素在移动端和电脑端显示或不显示的两种设置方法_web前端_03

这时改浏览器宽度小于1024,预览如下图:

HTML元素在移动端和电脑端显示或不显示的两种设置方法_移动网页_04

二、利用“按显示设备设置位置、大小、字体大小”中的“手机”和“平板电脑”的“隐藏”属性

如果没有特别设置,所创建的元素都会显示。

面板1的“按显示设备设置位置、大小、字体大小”->“手机”和“平板电脑”的“启用”和“隐藏”属性都要设置为“true”,如下:

HTML元素在移动端和电脑端显示或不显示的两种设置方法_移动网页_05

面板2的“更多属性”->“隐藏”设置为“true”,表示电脑网页下不显示,如下图:

HTML元素在移动端和电脑端显示或不显示的两种设置方法_移动网页_06

面板2的“按显示设备设置位置、大小、字体大小”->“手机”和“平板电脑”的“启用”设置为“true”,表示移动网页下显示,如下图:

HTML元素在移动端和电脑端显示或不显示的两种设置方法_移动网页_07

设置好后,按上面第一种方法预览,效果是一样的。

以上是关于HTML元素在移动端和电脑端显示或不显示的两种设置方法的主要内容,如果未能解决你的问题,请参考以下文章

织梦移动端m站点怎么做

根据当前设备环境来做pc端和手机端网页显示

thinkphp 实现移动端和PC端显示不同的模板

移动端rem自适应布局-最简单易懂的两种方法

pc端页面在移动端显示问题

为啥用dw做的详情页电脑端可以显示手机端不显示?