ホームページ >ウェブフロントエンド >htmlチュートリアル >レスポンシブとは何ですか?レスポンシブ レイアウトの詳細な紹介
この記事では、応答性とは何かについての内容をお届けします。レスポンシブレイアウトの詳細な紹介は、必要な友人が参考になれば幸いです。
レスポンシブ: さまざまなデバイス、さまざまな幅、さまざまな特性に応じて、ページ上のコンテンツのスタイルを対応する調整を行います
媒询 媒体查询 显示设备 @media 只有满足所有查询条件的时候,里面的样式才会被解析 all 所有媒体 braille 盲文触觉设备 embossed 盲文打印机 print 手持设备 projection 打印预览 screen 彩屏设备 speech ‘听觉’类似的媒体类型 tty 不适用像素的设备 tv 电视 and 用来链接多个查询条件 min-width : 大于等于 max-width: 小于等于
1 つの範囲を書き込み、使用しますこの範囲内のこのスタイル
<style> @media screen and (min-width:1000px) and (max-width:1300px){ .box{ width:100px; height: 100px; background: #333333; } } </style>
媒体特性; min-width:1000px 当屏幕宽度大于等于1000的时候会被解析 max-width:1300px 当屏幕宽度小于等于1300的时候会被解析 -webkit-min-device-pixel-ratio 最小像素比 -webkit-max-device-pixel-ratio 最大像素比 orientation:portrait (指定输出设备中的页面可见区域高度大于或等于宽度) orientation:landscape (除portrait值情况外,都是landscape)
<style> @media (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){ .box{ width:100px; height: 100px; background: #333333; } } </style>
@import "css/a.css" all and (min-width:800px); /* 宽度满足800-999的时候,只会引入a.css样式表 * @import "css/b.css" all and (min-width:1000px); /* 宽度满足1000-1199的时候,会同时引入a和b.css这两个样式表,后者覆盖前者 * @import "css/c.css" all and (min-width:1200px); /* 宽度满足1200的时候,会同时引入a和b、c.css这三个样式表,后者覆盖前者 */ /* 同时会满足多个样式的查询条件,这种方式引入样式表要注意样式表的顺序 */
@import "css/a.css" all and (min-width:800px) and (max-width:999px); /* 宽度满足800-999的时候,只会引入a.css样式表 */ @import "css/b.css" all and (min-width:1000px) and (max-width:1199px); /* 宽度满足1000-1199的时候,引入b.css样式表*/ @import "css/c.css" all and (min-width:1200px); /* 宽度满足1200的时候,引入c.css样式表 */ /* 因为同时只会满足一个样式表的查询条件,所以不需要太注意顺序 */
<style> .box{ width:100%; } .item_long{ width:100%; } .item_long img{ width:100%; } .item{ width:46%; height:270px; float: left; } .item:nth-child(even){ float: right; } .item img{ width:100%; } </style> <!--百分比布局适用于 布局不会发生改变 并且要求看到左右的内容-->
値が指定された場合パーセンテージとして、誰が計算します
幅は親の幅に基づいて計算されます
高さは親の高さに基づいて計算されます
マージンは常に親の幅に基づいて計算されます
top (Positioning_Absolute Positioning) 親の高さに基づいて計算されます
left (Positioning_Absolute Positioning) 親の幅に基づいて計算されます
padding は親の幅に基づいて計算されます
translatX,Y Based幅と高さを独自に計算します。
行の高さの表現方法: font:20px/1.2 '宋体'は文字サイズの 1.2 倍を意味します。
以上がレスポンシブとは何ですか?レスポンシブ レイアウトの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。