HTML 画面サイズ一覧
http://www.bravesoft.co.jp/blog/archives/550
機種解像度相対サイズ比率
iPhone5/5s640×1136320×568@2x
iPhone6750×1334375×667@2x
iPhone6 Plus1242×2208414×736@3x
CSSレスポンシブとメディアクエリをこれから勉強する人へ最新のSEO対策ならSEO JUMP
例えば
@media only screen and (max-width: 640px) {
strong{
font-size:24px;
color:red;
}
}
と書くと画面の最大横幅が640px以内の時だけ、フォントのサイズが24pxになって、文字色が赤くなる。
@media only screen and (min-width: 641px) {
strong{
font-size:24px;
color:red;
}
}
と書くと画面の最大横幅が641px以上の時だけ、フォントのサイズが24pxになって、文字色が赤くなる。
規格 | ピクセル数 | 画面アスペクト比 | ピクセルアスペクト比 | |||
横×縦 | 総数 | 横:縦 | 縦:1 | 横:縦 | 縦:1 | |
CGA4色 | 320×200 | 64000 | 4:3 | 1.333... | 5:6 | 0.833... |
320×240 | 76800 | 1:1 | 1 | |||
ハーフD1 | 360×480 | 172800 | 20:11 | 1.818... | ||
640×400 | 256000 | 36:25 | 1.44 | 9:10 | 0.9 | |
640×480 | 307200 | 4:3 | 1.333... | 1:1 | 1 | |
NTSC（D1） | 720×540 | 345600 | 10:11 | 0.909... | ||
NTSCスクイーズ | 720×480 | 345600 | 3:2 | 1.5 | 40:33 | 1.212... |
800×480 | 384000 | 5:3 | 1.666... | 1:1 | 1 | |
768×576 | 442368 | 4:3 | 1.333... | 12:11 | 1.090... | |
800×600 | 480000 | 1:1 | 1 | |||
1024×768 | 786432 | |||||
HDTV 720p（D4） | 1280×720 | 921600 | 16:9 | 1.777... | ||
1280×960 | 1228800 | 4:3 | 1.333... | |||
1280×1024 | 1310720 | 5:4 | 1.25 | |||
1400×1050 | 1470000 | 4:3 | 1.333... | |||
1680×1050 | 1764000 | 16:10 | 1.6 | |||
UXGA（UGA） | 1600×1200 | 1920000 | 4:3 | 1.333... | ||
HDTV 1080i（フルHD） | 1920×1080 | 2073600 | 16:9 | 1.777... | ||
1920×1200 | 2304000 | 16:10 | 1.6 | |||
2048×1080 | 2211840 | 256:135 | 1.896... | |||
2048×1536 | 3145728 | 4:3 | 1.333... | |||
2560×1440 | 3686400 | 16:9 | 1.777... | |||
2560×1600 | 4096000 | 16:10 | 1.6 | |||
2560×2048 | 5242880 | 5:4 | 1.25 | |||
3200×2400 | 7680000 | 4:3 | 1.333... | |||
4096×2160 | 8847360 | 256:135 | 1.896... | |||
3840×2400 | 9216000 | 16:10 | 1.6 | |||
