css隐藏内容样式方法(自适应页面常用)

简介: H5自适应网站制作时经常会遇到的一个问题,电脑端页面缩小到手机端页面内后发现有些栏目,有些图片太大或者影响美观,那么这个问题在吗解决呢?手机端最典型的就是iphoenplus最大宽度是414目前市场上占有率最大的大屏手机也差不多是这样,所以就可以写成当屏幕尺寸小于414px的时候屏幕下面所有的样式,为了不产生屏幕大小不一产生不同的样式错乱,所以这里建议写到480px,这样就囊括了基本上所有的手机屏幕了。

H5自适应网站制作时经常会遇到的一个问题,电脑端页面缩小到手机端页面内后发现有些栏目,有些图片太大或者影响美观,那么这个问题在吗解决呢?

手机端最典型的就是iphoenplus最大宽度是414目前市场上占有率最大的大屏手机也差不多是这样,所以就可以写成当屏幕尺寸小于414px的时候屏幕下面所有的样式,为了不产生屏幕大小不一产生不同的样式错乱,所以这里建议写到480px,这样就囊括了基本上所有的手机屏幕了。

3144730-7123d00f39ae85a8

然后接下来就是隐藏手机屏幕下不该显示的内容,比如手机端我不想让别人看到我的友情链接,或者不想让显示出来太大的幻灯片。都可以用 display:none;这个命令来实现。

@media only screen and (max-width: 480px){

.footer {

display: none;

}

}

css隐藏内容主要分为3总情况:

①隐藏所有内容无空白:display: none;

②隐藏溢出的文字或图片:overflow:hidden;

③隐藏内容但是仍然占据空间:visibility:hidden;

网站自适应css隐藏只是基础知识,对于隐藏最常见的用途就是js的一些特效展示。

来源:王尘宇博客,欢迎分享

目录
相关文章
|
5天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
8 2
|
7天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
31 1
|
10天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
15 3
|
20天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
15天前
|
前端开发
css <样式一>
css <样式一>
14 1
|
25天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
11 1
|
1月前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
35 6
|
9天前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
12 0
|
19天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
20 0
|
2月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
44 0