Heim >Web-Frontend >HTML-Tutorial >Was ist responsiv? Detaillierte Einführung in responsives Layout
Der Inhalt dieses Artikels dreht sich um die Frage: Was ist Reaktionsfähigkeit? Die detaillierte Einführung in das responsive Layout hat einen gewissen Referenzwert. Ich hoffe, dass es für Sie hilfreich ist.
Responsive: Nehmen Sie entsprechende Anpassungen am Stil des Inhalts auf der Seite entsprechend verschiedenen Geräten, unterschiedlichen Breiten und unterschiedlichen Funktionen vor.
媒询 媒体查询 显示设备 @media 只有满足所有查询条件的时候,里面的样式才会被解析 all 所有媒体 braille 盲文触觉设备 embossed 盲文打印机 print 手持设备 projection 打印预览 screen 彩屏设备 speech ‘听觉’类似的媒体类型 tty 不适用像素的设备 tv 电视 and 用来链接多个查询条件 min-width : 大于等于 max-width: 小于等于
Schreiben Sie einen Bereich und verwenden Sie ihn dieser Stil innerhalb dieses Bereichs
<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> <!--百分比布局适用于 布局不会发生改变 并且要求看到左右的内容-->
Wenn der Wert wird in Prozent angegeben, wer berechnet es?
Breite wird auf Basis der Breite des übergeordneten Elements berechnet
Höhe basierend auf der Höhe des übergeordneten Elements
Rand wird immer auf Basis der Breite des übergeordneten Elements berechnet
top Berechnet basierend auf der Höhe des (Positioning_Absolute Positioning) übergeordneten Elements
left Berechnet basierend auf der Breite des (Positioning_Absolute Positioning) übergeordneten Elements
padding Berechnet basierend auf der Breite des übergeordneten Elements
translatX,Y Berechnet basierend auf seiner eigenen Breite und Höhe berechnen
Zeilenhöhenausdrucksmethode: Schriftart: 20px/1.2 '宋体' bedeutet 1,2-fache Textgröße
Das obige ist der detaillierte Inhalt vonWas ist responsiv? Detaillierte Einführung in responsives Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!