初めに
よく使う記述で、毎度調べたりするのが面倒なので、ここに書き溜めていきます。
HTML編
HTML空の記述
<htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title></title></head><body></body></html>CSSの読み込み
<!-- cssの読み込み --><linkrel="stylesheet"href="./css/mobile.css"><!-- メディアクエリーで条件付きのcssの読み込み --><linkrel="stylesheet"href="./css/xxx.css"media="screen and (min-width: 640px)">CSS編
メディアクエリ
@mediascreenand(min-width:640px){/* 横幅640pxより大きくなると適応 */}親要素をはみ出す
.title{margin-left:calc(((100vw-100%)/2)*-1);margin-right:calc(((100vw-100%)/2)*-1);}↓↓こういうやつ↓↓
対応ブラウザ https://caniuse.com/#search=calc
対応ブラウザ https://caniuse.com/#feat=viewport-units
以上