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

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

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

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

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

.footer {

display: none;

}

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

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

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

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

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

来源：王尘宇博客，欢迎分享

css隐藏内容样式方法（自适应页面常用）相关推荐

这6个css隐藏内容的方法，用过没？
最近有个不同行的盆友问我,怎么把内容隐藏起来,我第一想到了用css的方法隐藏起来,我测试了以下这6中方法是可行,欢迎一起交流下,css的其他方法,我们最常用的应该是display:none就行了,其他 ...
css样式隐藏元素的方法,你不知道的css隐藏元素的方法
css隐藏元素是网页编写常用的方式,根据我的经验总结了以下几种css隐藏元素的方法. 记录 opacity opacity属性的隐藏方法主要是将元素透明度opacity设置为0,从而在视觉上就隐藏了元 ...
5种css隐藏元素的方法_在CSS中隐藏元素的10种方法
5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...
文字开头隐藏css,css隐藏文字一些方法总结
摘要腾兴网为您分享:css隐藏文字一些方法总结,字体大师,知音漫客,找乐助手,天天爱等软件知识,以及科学计算器app,yy自动上马甲,校园e信,英雄三部曲,苏州公共自行车,立体字转换器,四川省教育资 ...
CSS | 隐藏滚动条，但保持页面依旧能够滚动
原文地址:CSS | 隐藏滚动条,但保持页面依旧能够滚动(永久地址,保存网址不迷路
CSS隐藏内容的三种方法比较
1.display:none; 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字. 2. visibility: hidd ...
php 隐藏 div 代码,在HTML里用CSS隐藏div的方法
我们知道,在制作网页的过程中常常会想隐藏一些内容,比如网站添加第三方统计显示的图标等,如何通过CSS隐藏,怎么让图片作为背景,但文字又不显示呢?这篇文章来给大家解读一下. 一.普通隐藏网页内容 CSS ...
CSS隐藏元素的方法
隐藏元素之后,它在页面的行为如何? HTML文件如下很简单,就一个div <!DOCTYPE html> <html lang="en"> <hea ...
精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

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

css隐藏内容样式方法（自适应页面常用）相关推荐

最新文章

热门文章