レスポンシブWeb制作

Viewport(ビューポート)とMedia Queries(メディアクエリ)を使って、各デバイスに合わせた適切なレイアウトに変更します。

ビューポートを設定する

サイトをスマートフォン、タブレットなどで閲覧する際の表示領域の指定です。記述はHTMLのheadタグ内のmeta要素として追加します。

<br />
&lt;meta name=viewport content=&quot;width=device-width, initial-scale=1&quot;&gt;<br />

ブラウザー幅の条件分岐

<br />
/*1024px*/<br />
@media screen<br />
    and (max-width: 1024px) {<br />
}</p>
<p>/*768px*/<br />
@media screen<br />
    and (max-width: 768px) {<br />
}</p>
<p>/*480px*/<br />
@media screen<br />
    and (max-width: 480px) {<br />
}</p>
<p>/*320px*/<br />
@media screen<br />
    and (max-width: 320px) {<br />
}<br />

bootstrapを活用したサイトの構築もサポート致しますので、何かご要望がございましたらお気軽にお問い合わせください。

お問い合わせはこちらから 》