css --- 使用媒體查詢當屏幕寬度小于某個值時,隱藏掉某個類

Bootstrap提供了一個封裝好的類:
在這里插入圖片描述
.hidden-xs: 當屏幕寬度<768px時隱藏
.hidden-sm: 當屏幕768px <= 寬度<992px時隱藏
.hidden-md: 當屏幕992px<= 寬度<1200px時隱藏
.hidden-lg: 當屏幕寬度>1200px時隱藏

下面使用css3的 媒體查詢來實現:

@media screen and (max-width: 768px) {.hidden-xs{display: none;}
}@media screen and (min-width: 768px) and (max-width:992px) {.hidden-sm {display: none;}
}@media screen and (min-width: 992px) and (max-width:1200px) {.hidden-md {display: none;}
}@media screen and (min-width: 1200px) {.hidden-lg {display: none;}
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/250896.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/250896.shtml
英文地址,請注明出處:http://en.pswp.cn/news/250896.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

09 受控組件

含義 受控組件&#xff1a;由state來決定表單內部的數據&#xff0c;由表單的事件處理函數來更改state的方式 class App extends React.Component {// 1. state是表單的唯一數據源state {name: }handleChange (e) > {// 2. 控制表單操作并同步statethis.setState({name:…

劍指Offer--青蛙跳臺階引發的一系列問題

題目描述 一只青蛙一次可以跳上1級臺階&#xff0c;也可以跳上2級。求該青蛙跳上一個n級的臺階總共有多少種跳法&#xff08;先后次序不同算不同的結果&#xff09;。解法一&#xff08;效率最高&#xff09;數學歸納法&#xff1a;public class Solution {public int JumpFloo…

css --- 伸縮布局,讓圖片居中

很明顯,想要星星位于文字的正下方. // html <section id"lz_about" class"hidden-xs hidden-sm"><div class title text-center"><h1><strong>關于我</strong></h1><img src"./imgs/star.jpg" cla…

day9-Python學習筆記(二十)數據庫備份,修改父類的方法

數據庫備份&#xff0c;修改父類的方法 import os,datetimeclass BakDb(object): def __init__(self,ip,username,passwd,port3306,path/tmp/db_bak): self.ip ip self.username username self.passwd passwd self.port port self.path path …

10 非受控組件以及受控與非受控的選擇方案

含義 非受控組件&#xff1a;表單數據不受控與state的&#xff08;未綁定value&#xff09;&#xff0c;使用React ref從DOM節點中獲取表單數據的組件提示refs棄用 class MyForm extends React.Component {constructor(props) {super(props)}submit (e) > {e.preventDef…

wampserver3.0.6 外網 不能訪問

# 開始 今天在服務器上安裝了wampserver3.0.6 然后在我的電腦瀏覽器上面打開服務器ip提示 Forbidden 下面一行小字提示沒有權限訪問"/"目錄 # 解決 打開 httpd-vhost.conf 文件 修改成如下 # Virtual Hosts #<VirtualHost *:80>ServerName localhostServerAlia…

javascript --- 在linux上部署項目

最近對照視頻,用bootstrap jquery 寫了一個純前端頁面.想把它放在服務器上,供遠程使用. 準備服務器和域名 我服務器和域名是在騰訊云上租的,網址: https://cloud.tencent.com/ 注: 域名很便宜,挑個好的哈哈哈… 服務器(阿里云有個學生價…但是我那個學生價的賬號找不到了…)…

【openssl】利用openssl完成X509證書和PFX證書之間的互轉

利用openssl完成X509證書和PFX證書之間的互轉 # OpenSSL的下載與安裝&#xff1a; 1、下載地址&#xff1a; 官方網址—— https://www.openssl.org/source/ OpenSSL for Windows —— http://gnuwin32.sourceforge.net/packages/openssl.htm 2、安裝&#xff1a;此處已OpenSSL…

11 父子組件數據關系與狀態提升

含義 狀態提升&#xff1a;兩個組件&#xff08;無父子關系&#xff09;共享一個數據并且同步數據變化類組件調用&#xff08;實例化&#xff09;的時候&#xff0c;組件內部的狀態是唯一且獨立的組件嵌套與調用&#xff0c;和是類組件&#xff08;render&#xff09;還是函數…

SQL SERVER 一個SQL語句的執行順序

SQL SERVER 一個SQL語句的執行順序 原文:SQL SERVER 一個SQL語句的執行順序一個SQL 語句的執行順序 1、From (告訴程序 來自哪張表 如果是表表達式 依舊是如此順序) 2、Where&#xff08;條件篩選 謂詞篩選 &#xff09; 3、Group by&#xff08;分組&#xff09; 4、Having&…

JS-事件內置對象event

getKeyCode(event)當中的event必須全部小寫&#xff0c;是JS中時間內置對象&#xff0c;可以直接拿來用&#xff0c;event內種對象代表此刻發生的事件 1 <!doctype html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 …

工具分享 --- 分享一個在線制作ico的網站

還不錯… 生成后一般放在imgs的下面. link:favicon tab 導入鏈接http://www.faviconico.org/

laravel遷移文件

laravel遷移文件的命令 Laravel鼓勵敏捷、迭代的開發方式&#xff0c;我們沒指望在第一次就獲得所有正確的。我們對于自己編寫代碼,可以通過遷移文件,不斷的重復去測試.對于工作&#xff0c;我們開發一個完整的項目,是需要我們每個人相互配合,就好比用svn,git版本控制工具來存儲…

12 組合與繼承、CSS Module

組合與繼承 若Container內部有內容&#xff0c;React會在props內部增加children屬性若Container內部有非元素內容&#xff0c;children&#xff1a;非元素內容若Container內部有單個元素內容&#xff0c;children&#xff1a;React元素對象若Container內部有多個元素內容&…

工具分享 --- tinyPNG,大圖片壓縮工具

今天自己的寫的項目跑在了遠程服務器上… 圖片加載的速度讓人難以接受, 于是各種百度找到了一個在線找到了個圖片壓縮的網站 TinyPNG 可以看一下壓縮的效果…真心不錯啊… 網站如下: https://tinypng.com 額…有些大于5M的需要錢,才能壓縮… 用系統畫圖工具…貌似也能壓縮… …

Mysql 忘記管理員密碼更改

對管理員設置密碼第一種方式&#xff1a;#mysqladmin -u root password new-password;#mysqladmin -u root -h localhost password new-password;mysql的選項可以不帶空格&#xff0c;有時候帶空格是錯 第二種方式&#xff1a; set password for rootlocahostPASSWORED(); 第三…

ironic如何支持部署時按需RAID?

ironic如何支持部署時按需RAID&#xff1f; 新浪大神推薦使用element proliant-tools制作deploy image。element proliant-tools會在ipa ramdisk中安裝一個rpm包hpssacli&#xff08;HP的RAID管理工具&#xff09;&#xff0c;和一個python module proliantutils&#xff08;里…

14 代碼分割之lazy:Suspense與路由懶加載

lazy內置方法 Suspense內置組件 lazy是React提供的懶&#xff08;動態&#xff09;加載組件的方法&#xff0c;React.lazy() 能減少打包體積、延遲加載首屏不需要渲染的組件 依賴內置組件Suspense&#xff1a;給lazy加上loading指示器組件的一個容器組件 Suspense目前只和la…

三年工作的總結

其實開通博客已經有四年之久了,但遺憾的是從來沒有認真寫過一篇博客,只是在平時會瀏覽一些大牛寫過的博客。 其實我覺得做技術的定期總結自己的經驗還是很重要的。 不知不覺參加工作已經三年了,三年時間真的過得很快,想當初帶著一腔熱血,一個背包走天下,來到上海,從零開始&…

css --- 兄弟選擇器

語法: /* 查找后邊的一個兄弟元素 */ 兄弟元素 兄弟元素/* 查找后邊的所有兄弟元素 */ 兄弟元素 ~ 兄弟元素<head><style>#maindiv {color: red;}#main~div {background-color: #e0e0e0;}</style> </head> <body><div id"main"&g…