当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【サンプルデモ】レスポンシブデザインのブレークポイントはこれで決まり! - Webデザインラボ

【2020年度決定版】レスポンシブデザインのブレークポイントはこれで決まり!

ブラウザを大きくしたり小さくしたりすると今効いているブレークポイントがわかるよ↑

main

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu molestie enim. Donec nunc lorem, tincidunt sagittis accumsan at, finibus vitae odio. In sem nulla, dictum et velit malesuada, gravida volutpat justo. Phasellus suscipit iaculis nulla ut porttitor. Fusce posuere magna ut ullamcorper consectetur. Ut sed nisi risus. Praesent vehicula semper risus, ac imperdiet purus vehicula dignissim. Aenean scelerisque facilisis condimentum. Cras consectetur ut risus vitae venenatis.

Cras luctus odio sed sem cursus fermentum. Sed quis lorem interdum, ornare lacus sed, fringilla lorem. Mauris tempus et quam sit amet venenatis. Praesent a quam at metus pharetra fringilla sit amet quis lacus. Pellentesque eu libero varius, dapibus elit ut, vulputate ex. Integer mollis rutrum arcu, quis cursus purus. Curabitur nisi arcu, sodales eget semper nec, imperdiet sed leo. Nulla dapibus vitae neque a finibus.

Nunc purus sem, bibendum eu pharetra vitae, lobortis ornare velit. Suspendisse pretium tellus ac sollicitudin sagittis. In id sem non libero tincidunt ullamcorper et ac nisl. Morbi sed efficitur lacus, in venenatis ex. Quisque pulvinar non ipsum sed pharetra. Sed vulputate, magna blandit tempus sagittis, velit metus lacinia felis, id iaculis libero lectus vel justo. Nunc nec ante et dolor fermentum convallis. Fusce mi leo, dapibus ut hendrerit sit amet, pharetra eu augue. Nam aliquam lacus nec nibh egestas placerat.

aside

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu molestie enim. Donec nunc lorem, tincidunt sagittis accumsan at, finibus vitae odio. In sem nulla, dictum et velit malesuada, gravida volutpat justo. Phasellus suscipit iaculis nulla ut porttitor. Fusce posuere magna ut ullamcorper consectetur. Ut sed nisi risus. Praesent vehicula semper risus, ac imperdiet purus vehicula dignissim. Aenean scelerisque facilisis condimentum. Cras consectetur ut risus vitae venenatis.

サンプルデモ