Q&ACSS Grid Layoutでレスポンシブなデザインを作っているのですが、一見上手くいっているようで実際は上手くいっていない状況です。
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Test</title> 6 <style> 7 .box { 8 display: grid; 9 grid-auto-flow: column; 10 grid-template-rows: 100px 100px; 11 grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); 12 } 13 </style> 14</head> 15<body> 16<div class="box"> 17 <div style="background-color: red"> 18 カラムA 19 </div> 20 <div style="background-color: blue"> 21 カラムB 22 </div> 23</div> 24</body> 25</html>
サンプルとして簡単なGrid Layoutを書いてみました。こちらはPC画面上だと上手くいっているように見えます。
しかしスマホ画面だと、下記のようになってしまいます。
個人的なイメージとしてはスマホも2枚目の画像のようになってほしいのですが、一体どうすれば良いのでしょうか？
回答1件
0
自己解決
viewport入れてないだけでした。おさわがせしました。
html
1<meta name="viewport" content="width=device-width,initial-scale=1">
投稿2019/11/13 01:31
総合スコア13
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。