HTML <style> media 属性

HTML <style> 标籤

Definition and usage

media Ang katangian na ito ay ginagamit upang tukuyin ang media o device na pinupunton ng CSS estilo (optimizado).

Ang katangian na ito ay ginagamit upang tukuyin ang estilo na dapat gamitin para sa partikular na device (tulad ng iPhone), boses o print media.

Mga payo:Ang katangian na ito ay maaaring tanggapin ng maraming halaga.

Sample

Example 1

Tuturuan ang estilo na gagamitin para sa pagprint:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Subukan nang personal.

Example 2

Ginagamit ang katangian ng width ng attribute ng media upang maghiwalay ang dalawang grupo ng estilo:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Subukan nang personal.

Komento:Ang unang grupo ng estilo ay ginagamit kapag ang lapad ng window ng browser ay mas maliit sa 500 pixels, at ang ikalawang grupo ng estilo ay ginagamit kapag ang lapad ng window ng browser ay mas malaki sa 500 pixels.

Grammar

<style media="value>

Possible operators

Operator Paglalarawan
and Batas AND operator.
not Batas NOT operator.
, Batas OR operator.

Ang kundisyon ng paggamit ng estilo ay maaaring idisenyo nang napakahalata. Unang dapat malaman ay ang uri ng device na pinupuntahan. Ang sumusunod na talahanan ay nagtatala ng lahat ng tumutugma sa batas na halaga:

Device

Device Paglalarawan
all Default. Applies to all devices.
aural Voice synthesizer.
braille Braille feedback device.
handheld Handheld device (small screen, limited bandwidth).
projection Projector.
print Print preview mode/print page.
screen Computer screen.
tty Mga telegrafong typewriter at katulad na media na gumagamit ng grid ng walang espasyong character.
tv Ang uri ng device na katulad ng telebisyon (mababang resolyusyon, limitadong paggalaw).

Ang browser ang responsableng ipaliwanag ang uri ng device. Ang ilang uri ng device (tulad ng screen at print) ay mayroong katulad na paliwanag sa iba't ibang browser, ngunit ang ilang uri ng device (tulad ng handheld) ay maaaring maging mas walang palagay. Kaya't napakahalaga na suriin kung ang browser na pinupuntahan ay may katulad na paliwanag sa espesipikong device at sa sarili mong paliwanag.

Karaktaristika

Karaktaristika Paglalarawan
width

Tinutukoy ang lapad ng layuning na display area.

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="screen and (min-width:500px)"
height

Tinutukoy ang taas ng layuning na display area.

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="screen and (max-height:700px)"
device-width

Tinutukoy ang lapad ng layuning na displayer/papel.

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="screen and (device-width:500px)"
device-height

Tinutukoy ang taas ng layuning na displayer/papel.

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="screen and (device-height:500px)"
orientation

Tinutukoy ang direksyon ng layuning na displayer/papel.

Ang mga suportadong halaga: portrait o landscape.

คุณสมบัตินี้ไม่มีคำจำกัดเอยอิง

Halimbawa: media="all and (orientation: landscape)"
aspect-ratio

Tinutukoy ang ratio ng width at height ng layuning na display area.

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Tinutukoy ang ratio ng width at height ng layuning na displayer/papel.

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="screen and (aspect-ratio:16/9)"
color

Tinutukoy ang bilang ng bit bawat kulay ng layuning na displayer.

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="screen and (color:3)"
color-index

Tinutukoy ang bilang ng kulay na maaaring hawakan ng layuning na displayer.

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="screen and (min-color-index:256)"
monochrome

Tinutukoy ang bilang ng bit bawat pixel sa buffer ng monokrom.

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="screen and (monochrome:2)"
resolution

Tinutukoy ang tindik ng pixel ng layuning na displayer/papel (dpi o dpcm).

Maaaring gamitin ang prefix na "min-" at "max-".

Halimbawa: media="print and (resolution:300dpi)"
scan

Tinutukoy ang modong pagscanning ng telebisyon.

Ang mga suportadong halaga ay progressive at interlace.

คุณสมบัตินี้ไม่มีคำจำกัดเอยอิง

Halimbawa: media="tv and (scan:interlace)"
grid

กำหนดอุปกรณ์ออกอากาศเป็นกริดหรือบิตแมップ

อุปกรณ์แบบแนวเชื่อมน้ำใช้กริดเสริมแสดงเนื้อหา ตัวอย่างเช่นเซิร์ฟเวอร์ของหลักฐานและโทรศัพท์ประหยัดที่แสดงเนื้อหาแบบแถวเดียว

ค่าที่สนับสนุนมี 0 และ 1 (1 แสดงถึงอุปกรณ์แบบแนวเชื่อมน้ำ)

คุณสมบัตินี้ไม่มีคำจำกัดเอยอิง

เช่น：media="handheld and (grid:1)"

คุณสมบัติเช่น width มักจะใช้คำจำกัดเอยอิง min และ max ร่วมกัน。ไม่ใช้คำจำกัดเอยอิงนี้ สไตล์จะขึ้นอยู่กับขนาดหน้าต่างที่เฉพาะอย่างยิ่งด้วย แต่การเพิ่มคำจำกัดเอยอิงจะทำให้เงื่อนไขเป็นอ่อนโอนยิ่งขึ้น

ตารางด้านบนระบุและนำเสนอคุณสมบัติที่สามารถใช้งานได้หลากหลาย หากไม่มีการกำหนดโดยเฉพาะ คุณสมบัติเหล่านี้สามารถใช้ min- และ max- มาสร้างค่าของเขตภาค ไม่ใช่ค่าที่เฉพาะ

เช่นเดียวกับสถานการณ์ของอุปกรณ์ที่กำหนดไว้ คุณสมบัติเหล่านี้ก็เป็นสิ่งที่เบราเซอร์เป็นผู้อธิบาย สถานการณ์ที่เบราเซอร์รู้เกี่ยวกับคุณสมบัตินี้และสิ่งที่คุณสมบัตินี้มีอยู่และสามารถใช้งานได้เป็นสิ่งที่หลากหลาย หากต้องการใช้สไตล์สำหรับคุณสมบัติเหล่านี้ กรุณาทำการทดสอบอย่างเต็มที่ และเตรียมรับมือสไตล์ที่ใช้แทนเมื่อคุณสมบัติไม่สามารถใช้งานได้

การสนับสนุนเบราเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน

HTML <style> 标籤