コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > レスポンシブレイアウトの簡単な事例紹介

レスポンシブレイアウトの簡単な事例紹介

高洛峰
リリース： 2017-03-07 14:14:37
オリジナル
1031 人が閲覧しました

レスポンシブ レイアウト

レスポンシブ レイアウト デザインは、基本的に、さまざまな解像度のデバイスに対応できる優れた柔軟性を備えており、優れたユーザーにページの閲覧を提供します。私が作成したシンプルなレスポンシブ レイアウトを共有しましょう:

レスポンシブレイアウトの簡単な事例紹介

レスポンシブレイアウトの簡単な事例紹介

異なるページは、ブラウザ ページの異なるサイズに適応します。解像度によって異なります。コードは以下に示されています: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
　　p{    
　　　　font-size: 12px;    
　　}    
　　header{    
　　　　width: 100%;    
　　}    
　　header img{    
　　　　width: 100%;    
　　}    
　　@media (min-width: 1300px) and (max-width:1400px) {    
　　　　#left{    
　　　　　　float: left;    
　　　　　　width: 30%;    
　　　　　　margin: 0px 50px;    
　　　　}    
　　　　#left #logo-bg{    
　　　　　　margin: 10% 10%;    
　　　　　　width: 80%;    
　　　　　　position: relative;    
　　　　}    
　　　　#left #logo{    
　　　　　　float: left;    
　　　　　　width: 12%;    
　　　　　　position: absolute;    
　　　　　　left: 13%;    
　　　　　　top: 230px;    
　　　　}    
　　　　#left p{    
　　　　　　margin-bottom: -20px;    
　　　　}    
　　　　#left p,h4{    
　　　　　　text-align: center;    
　　　　　　color: red;    
　　　　}    
　　　　#right{    
　　　　　　float: left;    
　　　　　　width: 60%;    
　　　　　　margin: 15% 0px;    
　　　　}    
　　　　#right h2{    
　　　　　　text-align: center;    
　　　　}    
　　　　#right fieldset{    
　　　　　　text-align: center;    
　　　　　　border-left: none;    
　　　　　　border-right: none;    
　　　　　　border-bottom: none;    
　　　　}    
　　　　#right fieldset legend{    
　　　　　　padding: 0px 20px;    
　　　　}    
　　　　#fen{    
　　　　　　width: 100%;    
　　　　　　-webkit-column-count: 6;    
　　　　　　-moz-column-count: 6;    
　　　　　　-o-column-count: 6;    
　　　　　　-ms-column-count: 6;    
　　　　　　column-count: 6;    
　　　　　　-webkit-column-gap: 1em;    
　　　　　　-moz-column-gap: 1em;    
　　　　　　-o-column-gap: 1em;    
　　　　　　-ms-column-gap: 1em;    
　　　　　　column-gap: 1em;    
　　　　}    
　　　　#fen img{    
　　　　　　width: 100%;    
　　　　　　border-radius: 10px 10px 10px 10px;    
　　　　}    
　　　　#fen p,h4{    
　　　　　　text-align: center;    
　　　　　　color: red;    
　　　　}    
　　　　#fen p{    
　　　　　　margin-bottom: -20px;    
　　　　}    
　　　　#di p{    
　　　　　　text-align: center;    
　　　　}    
　　　　#di p span{    
　　　　　　　color: red;    
　　　　}    
　　}    
　　@media (min-width: 1000px) and (max-width:1300px){    
　　　　#left{    
　　　　　　float: left;    
　　　　　　width: 30%;    
　　　　　　margin: 0px 50px;    
　　　　}    
　　　　#left #logo-bg{    
　　　　　　margin: 10% 10%;    
　　　　　　width: 80%;    
　　　　　　position: relative;    
　　　　}    
　　　　#left #logo{    
　　　　　　width: 12%;    
　　　　　　position: absolute;    
　　　　　　left: 14%;    
　　　　　　top: 190px;    
　　　　}    
　　　　#left p{    
　　　　　　margin-bottom: -20px;    
　　　　}    
　　　　#left p,h4{    
　　　　　　text-align: center;    
　　　　　　color: red;    
　　　　}    
　　　　#right{    
　　　　　　float: left;    
　　　　　　width: 60%;    
　　　　　　margin: 15% 0px;    
　　　　}    
　　　　#right h2{    
　　　　　　text-align: center;    
　　　　}    
　　　　#right fieldset{    
　　　　　　text-align: center;    
　　　　　　border-left: none;    
　　　　　　border-right: none;    
　　　　　　border-bottom: none;    
　　　　}    
　　　　#right fieldset legend{    
　　　　　　padding: 0px 20px;    
　　　　}    
　　　　#fen{    
　　　　　　width: 100%;    
　　　　　　-webkit-column-count: 3;    
　　　　　　-moz-column-count: 3;    
　　　　　　-o-column-count: 3;    
　　　　　　-ms-column-count: 3;    
　　　　　　column-count: 3;    
　　　　　　-webkit-column-gap: 1em;    
　　　　　　-moz-column-gap: 1em;    
　　　　　　-o-column-gap: 1em;    
　　　　　　-ms-column-gap: 1em;    
　　　　　　column-gap: 1em;    
　　　　}    
　　　　#fen img{    
　　　　　　　　width: 100%;    
　　　　　　　　border-radius: 10px 10px 10px 10px;    
　　　　}    
　　　　#fen p,h4{    
　　　　　　　　text-align: center;    
　　　　　　　　color: red;    
　　　　　　}    
　　　　#fen p{    
　　　　　　　　margin-bottom: -20px;    
　　　　}    
　　　　#di p{    
　　　　　　text-align: center;    
　　　　}    
　　　　#di p span{    
　　　　　　color: red;    
　　　　}    
　　}    
</style>
</head>
<body>
　　<header>
　　　　<img  src="img/rag.png" / alt="レスポンシブレイアウトの簡単な事例紹介" >
　　</header>
　　<aside id="left">
　　　　<img  src="img/logo-bg.png" id="logo-bg"/ alt="レスポンシブレイアウトの簡単な事例紹介" >
　　　　<img  src="img/logo.png" id="logo" / alt="レスポンシブレイアウトの簡単な事例紹介" >
　　　　<hr />
　　　　<p>THE</p>
　　　　<h4>WEBLOCUE</h4>
　　　　<hr />
　　　　<p>THE</p>
　　　　<h4>WEBLOCUE</h4>
　　　　<hr />
　　　　<p>THE</p>
　　　　<h4>WEBLOCUE</h4>
　　　　<hr />
　　</aside>
　　<article id="right">
　　　　<h2>“Give me problems, give me work.”</h2>
　　　　<p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
　　　　<p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
　　　　<fieldset><legend>victors</legend></fieldset>
　　　　<p id="fen">
　　　　　　<img  src="img/1.jpg" / alt="レスポンシブレイアウトの簡単な事例紹介" >
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img  src="img/2.jpg" / alt="レスポンシブレイアウトの簡単な事例紹介" >
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img  src="img/3.jpg" / alt="レスポンシブレイアウトの簡単な事例紹介" >
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img  src="img/4.jpg" / alt="レスポンシブレイアウトの簡単な事例紹介" >
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img  src="img/5.jpg" / alt="レスポンシブレイアウトの簡単な事例紹介" >
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　　　<img  src="img/6.jpg" / alt="レスポンシブレイアウトの簡単な事例紹介" >
　　　　　　<p>SETCOME</p>
　　　　　　<h4>HOLEMES</h4>
　　　　</p>
　　　　<fieldset><legend>*</legend></fieldset>
　　　　<p id="di">
　　　　　　<p>In the year 1878 I took <span>Suing table</span> dogree of Doctor</p>
　　　　　　<p>What the year 2016 I took dogree <span>Ruing roid</span> of Doctor</p>
　　　　</p>
　　</article>
</body>
</html>
ログイン後にコピー

時間の関係で十分に厳密ではありませんが、ご容赦ください。

上記のレスポンシブ レイアウトの簡単なケースは、エディターによって共有されたすべてのコンテンツです。参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

レスポンシブレイアウトの簡単な事例紹介や関連記事は、PHP中国語サイトにぜひご注目ください！

関連ラベル：
レスポンシブレイアウト
ソース：php.cn
前の記事：iPhoneのスライドロック解除機能のCSS3実装コード例 次の記事：インライン要素とブロックレベル要素の違いの詳細な紹介
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
POST リクエストは Postman を使用している場合は正常に動作しますが、React axios と Spring Boot バックエンドを使用している場合は正常に動作しません 反応コンソールから、URL「:8080/api/review-add」を指すエラー メッセージ「リソースを読み込めません: サーバーの応答ステータスは 500()」が表示されます ...
から 2024-04-05 13:07:01
0
1
396
WooCommerce 顧客の支払い方法履歴を取得する 必要な情報、つまり顧客が注文時にこれまでに使用した支払い方法を取得するのに役立つスクリプトを見つけました。 $order=newWC_Order($order_id);$payme...
から 2024-04-04 14:57:11
0
1
428
単一のグリッドまたは Flex を使用して多様なカード レイアウトを作成する: 実用的なガイド 写真のようなレスポンシブカードレイアウトを作成しようとしています。私が現在行っているのは、コンピューター、タブレット、モバイル デバイス用に個別のレイアウトを作成することです。次に...
から 2024-04-02 21:07:36
0
2
377
Next.js のレイアウトによりページのコンテンツが見えにくくなる Next.js アプリケーションのレイアウトとして、マテリアル ui (https://mui.com/material-ui/react-bottom-navigation/) ...
から 2024-04-02 19:42:19
0
1
275
レスポンシブモードでリストをツールバーに変更することはできますか? 以下のカードを持っています。 nav には多くの項目があります (簡潔にするためにここでは 1 つだけ残しておきます)。 <divclass="col-md-3&q...
から 2024-04-02 16:09:27
0
1
263
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート