ショコラ
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>
以上