CSS Fomantic-uiでメディアクエリーで表示内容を切り替えるサンプル

/ CSS / By
ショコラ
ショコラ

CSS Fomantic-uiでメディアクエリーで表示内容を切り替えるサンプル

Fomantic-ui でメディアクエリーによって表示内容を切り替えるサンプルプログラムです。

もっさん先輩
もっさん先輩
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
</head>
<body>

<style>
.mediaQuery1,.mediaQuery2,.mediaQuery3,.mediaQuery4
{
  display:none;
}
@media screen and (1px <= width < 768px)
{
  .mediaQuery1 {
    display:block;
  }
}
@media screen and (768px <= width < 992px)
{
  .mediaQuery2 {
    display:block;
  }
}
@media screen and (992px <= width < 1200px)
{
  .mediaQuery3 {
    display:block;
  }
}
@media screen and (1200px <= width)
{
  .mediaQuery4 {
    display:block;
  }
}
</style>

<div class="ui container">
  <div class="ui input">
    <input type="text" placeholder="Search...">
  </div>
  <div class="mediaQuery1">
    0px <= width < 768px
  </div>
  <div class="mediaQuery2">
    768px <= width < 992px
  </div>
  <div class="mediaQuery3">
    992px <= width < 1200px
  </div>
  <div class="mediaQuery4">
    1200px -
  </div>
</div>

</body>
</html>

以上

Scroll to Top