■ はじめに
https://blogs.yahoo.co.jp/dk521123/37602012.htmlでやった吹き出しの向きをデバイスによって変えてみる
補足：吹き出し
* 吹き出しの復習については、以下の動画サイトを参照。動画
https://dotinstall.com/lessons/balloon_css
■ メディアクエリ / @media
* デバイスに合わせてCSSを切り替えることができる
構文
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
}
@media screen and (min-width:768px) and (max-width:1024px) {
/* 画面サイズが768pxから1024pxまではここを読み込む */
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024pxからはここを読み込む */
}
■ サンプル
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
/* 吹き出しの本体 */
.balloon {
position: relative;
display: inline-block;
padding: 7px 10px;
color: #fff; /* 文字色：白 */
background: #ff9800;
border-radius: 15px;
}
/* 吹き出しの三角形部分(上向きの吹き出し) */
.balloon:before{
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -15px;
border: 10px solid transparent;
border-bottom: 10px solid #ff9800;
}
@media screen and (max-width: 47.2em) {
/* 吹き出しの三角形部分(下向きの吹き出し) */
.balloon:before{
content: "";
position: absolute;
top: 100%; /* 変更部分 */
left: 50%;
margin-left: -15px;
border: 10px solid transparent;
border-top: 10px solid #ff9800; /* 変更部分 */
}
}
</style>
</head>
<body>
<div class="balloon">
<p>はろーわーるど</p>
</div>
</body>
</html>