CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Dosbarthiadau dangos/cuddio yn ôl lled y ffenestr neu'r cynhwysydd ar raddfa torbwynt themaedig.

.instui-hidden-max-<bp>/-hidden-min-<bp> yn cuddio yn ôl lled y ffenestr; mae .instui-show-max-<bp>/-show-min-<bp> yn y gwrthwyneb (cuddiedig fel arfer, dim ond yn ymddangos o fewn y cyfnod drwy display: revert); mae'r amrywiadau -cq- yn ymateb i led rhieni .instui-container yn lle led y ffenestr. Mae'r haenau raddfa xs/sm/md/lg/xl (tarddiad o docennau cydran tray-width yr IR) wedi'u hail-enwi i ffurflen hir (x-small–x-large) a enw dyfais (mobile/phablet/tablet/laptop/desktop) — y ddau yn hen ffasiwn o blaid y enw byr — yn ogystal â'r haenau themaedig heb eu graddio content/content-full-width (uchaf-lled ardal y prif gynnwys).

Source: index.ts

Defnydd

@import "@pantoken/components/utilities.css";

Enghreifftiau

<div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>
<div class="instui-show-min-sm">Shown only at or above the small breakpoint.</div>

Modyfiwyr

Modyfiwr	Disgrifiad
.-cq-hidden-max-content	Cuddio pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt content (68.75em).
.-cq-hidden-max-content-full-width	Cuddio pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt content-full-width (98.75em).
.-cq-hidden-max-desktop	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-laptop	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-large	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-lg	Cuddio pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt lg (48em).
.-cq-hidden-max-md	Cuddio pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt md (30em).
.-cq-hidden-max-medium	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-mobile	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-phablet	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-sm	Cuddio pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt sm (20em).
.-cq-hidden-max-small	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-tablet	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-x-large	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-x-small	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-xl	Cuddio pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt xl (62em).
.-cq-hidden-max-xs	Cuddio pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt xs (16em).
.-cq-hidden-min-content	Cuddio pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt content (68.75em).
.-cq-hidden-min-content-full-width	Cuddio pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt content-full-width (98.75em).
.-cq-hidden-min-desktop	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-laptop	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-large	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-lg	Cuddio pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt lg (48em).
.-cq-hidden-min-md	Cuddio pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt md (30em).
.-cq-hidden-min-medium	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-mobile	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-phablet	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-sm	Cuddio pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt sm (20em).
.-cq-hidden-min-small	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-tablet	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-x-large	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-x-small	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-xl	Cuddio pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt xl (62em).
.-cq-hidden-min-xs	Cuddio pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt xs (16em).
.-cq-show-max-content	Dangos pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt content (68.75em); cuddiedig fel arall.
.-cq-show-max-content-full-width	Dangos pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt content-full-width (98.75em); cuddiedig fel arall.
.-cq-show-max-desktop	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-laptop	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-large	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-lg	Dangos pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt lg (48em); cuddiedig fel arall.
.-cq-show-max-md	Dangos pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt md (30em); cuddiedig fel arall.
.-cq-show-max-medium	Alias — maps to .-cq-show-max-md.
.-cq-show-max-mobile	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-phablet	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-sm	Dangos pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt sm (20em); cuddiedig fel arall.
.-cq-show-max-small	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-tablet	Alias — maps to .-cq-show-max-md.
.-cq-show-max-x-large	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-x-small	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-xl	Dangos pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt xl (62em); cuddiedig fel arall.
.-cq-show-max-xs	Dangos pan fo'r cynhwysydd marciedig ar neu o dan y torbwynt xs (16em); cuddiedig fel arall.
.-cq-show-min-content	Dangos pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt content (68.75em); cuddiedig fel arall.
.-cq-show-min-content-full-width	Dangos pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt content-full-width (98.75em); cuddiedig fel arall.
.-cq-show-min-desktop	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-laptop	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-large	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-lg	Dangos pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt lg (48em); cuddiedig fel arall.
.-cq-show-min-md	Dangos pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt md (30em); cuddiedig fel arall.
.-cq-show-min-medium	Alias — maps to .-cq-show-min-md.
.-cq-show-min-mobile	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-phablet	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-sm	Dangos pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt sm (20em); cuddiedig fel arall.
.-cq-show-min-small	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-tablet	Alias — maps to .-cq-show-min-md.
.-cq-show-min-x-large	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-x-small	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-xl	Dangos pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt xl (62em); cuddiedig fel arall.
.-cq-show-min-xs	Dangos pan fo'r cynhwysydd marciedig ar neu uwch na'r torbwynt xs (16em); cuddiedig fel arall.
.-hidden-max-content	Cuddio pan fo'r ffenestr golwg ar neu o dan y torbwynt content (68.75em).
.-hidden-max-content-full-width	Cuddio pan fo'r ffenestr golwg ar neu o dan y torbwynt content-full-width (98.75em).
.-hidden-max-desktop	Alias — maps to .-hidden-max-xl.
.-hidden-max-laptop	Alias — maps to .-hidden-max-lg.
.-hidden-max-large	Alias — maps to .-hidden-max-lg.
.-hidden-max-lg	Cuddio pan fo'r ffenestr golwg ar neu o dan y torbwynt lg (48em).
.-hidden-max-md	Cuddio pan fo'r ffenestr golwg ar neu o dan y torbwynt md (30em).
.-hidden-max-medium	Alias — maps to .-hidden-max-md.
.-hidden-max-mobile	Alias — maps to .-hidden-max-xs.
.-hidden-max-phablet	Alias — maps to .-hidden-max-sm.
.-hidden-max-sm	Cuddio pan fo'r ffenestr golwg ar neu o dan y torbwynt sm (20em).
.-hidden-max-small	Alias — maps to .-hidden-max-sm.
.-hidden-max-tablet	Alias — maps to .-hidden-max-md.
.-hidden-max-x-large	Alias — maps to .-hidden-max-xl.
.-hidden-max-x-small	Alias — maps to .-hidden-max-xs.
.-hidden-max-xl	Cuddio pan fo'r ffenestr golwg ar neu o dan y torbwynt xl (62em).
.-hidden-max-xs	Cuddio pan fo'r ffenestr golwg ar neu o dan y torbwynt xs (16em).
.-hidden-min-content	Cuddio pan fo'r ffenestr golwg ar neu uwch na'r torbwynt content (68.75em).
.-hidden-min-content-full-width	Cuddio pan fo'r ffenestr golwg ar neu uwch na'r torbwynt content-full-width (98.75em).
.-hidden-min-desktop	Alias — maps to .-hidden-min-xl.
.-hidden-min-laptop	Alias — maps to .-hidden-min-lg.
.-hidden-min-large	Alias — maps to .-hidden-min-lg.
.-hidden-min-lg	Cuddio pan fo'r ffenestr golwg ar neu uwch na'r torbwynt lg (48em).
.-hidden-min-md	Cuddio pan fydd y ffenestr ar neu uwchlaw torri pwynt md (30em).
.-hidden-min-medium	Alias — maps to .-hidden-min-md.
.-hidden-min-mobile	Alias — maps to .-hidden-min-xs.
.-hidden-min-phablet	Alias — maps to .-hidden-min-sm.
.-hidden-min-sm	Cuddio pan fydd y ffenestr ar neu uwchlaw torri pwynt sm (20em).
.-hidden-min-small	Alias — maps to .-hidden-min-sm.
.-hidden-min-tablet	Alias — maps to .-hidden-min-md.
.-hidden-min-x-large	Alias — maps to .-hidden-min-xl.
.-hidden-min-x-small	Alias — maps to .-hidden-min-xs.
.-hidden-min-xl	Cuddio pan fydd y ffenestr ar neu uwchlaw torri pwynt xl (62em).
.-hidden-min-xs	Cuddio pan fydd y ffenestr ar neu uwchlaw torri pwynt xs (16em).
.-show-max-content	Dangos (gwrthdro o -hidden-min-content) pan fydd y ffenestr ar neu o dan torri pwynt content (68.75em); wedi'i guddio fel arall.
.-show-max-content-full-width	Dangos (gwrthdro o -hidden-min-content-full-width) pan fydd y ffenestr ar neu o dan torri pwynt content-full-width (98.75em); wedi'i guddio fel arall.
.-show-max-desktop	Alias — maps to .-show-max-xl.
.-show-max-laptop	Alias — maps to .-show-max-lg.
.-show-max-large	Alias — maps to .-show-max-lg.
.-show-max-lg	Dangos (gwrthdro o -hidden-min-lg) pan fydd y ffenestr ar neu o dan torri pwynt lg (48em); wedi'i guddio fel arall.
.-show-max-md	Dangos (gwrthdro o -hidden-min-md) pan fydd y ffenestr ar neu o dan torri pwynt md (30em); wedi'i guddio fel arall.
.-show-max-medium	Alias — maps to .-show-max-md.
.-show-max-mobile	Alias — maps to .-show-max-xs.
.-show-max-phablet	Alias — maps to .-show-max-sm.
.-show-max-sm	Dangos (gwrthdro o -hidden-min-sm) pan fydd y ffenestr ar neu o dan torri pwynt sm (20em); wedi'i guddio fel arall.
.-show-max-small	Alias — maps to .-show-max-sm.
.-show-max-tablet	Alias — maps to .-show-max-md.
.-show-max-x-large	Alias — maps to .-show-max-xl.
.-show-max-x-small	Alias — maps to .-show-max-xs.
.-show-max-xl	Dangos (gwrthdro o -hidden-min-xl) pan fydd y ffenestr ar neu o dan torri pwynt xl (62em); wedi'i guddio fel arall.
.-show-max-xs	Dangos (gwrthdro o -hidden-min-xs) pan fydd y ffenestr ar neu o dan torri pwynt xs (16em); wedi'i guddio fel arall.
.-show-min-content	Dangos (gwrthdro o -hidden-max-content) pan fydd y ffenestr ar neu uwchlaw torri pwynt content (68.75em); wedi'i guddio fel arall.
.-show-min-content-full-width	Dangos (gwrthdro o -hidden-max-content-full-width) pan fydd y ffenestr ar neu uwchlaw torri pwynt content-full-width (98.75em); wedi'i guddio fel arall.
.-show-min-desktop	Alias — maps to .-show-min-xl.
.-show-min-laptop	Alias — maps to .-show-min-lg.
.-show-min-large	Alias — maps to .-show-min-lg.
.-show-min-lg	Dangos (gwrthdro o -hidden-max-lg) pan fydd y ffenestr ar neu uwchlaw torri pwynt lg (48em); wedi'i guddio fel arall.
.-show-min-md	Dangos (gwrthdro o -hidden-max-md) pan fydd y ffenestr ar neu uwchlaw torri pwynt md (30em); wedi'i guddio fel arall.
.-show-min-medium	Alias — maps to .-show-min-md.
.-show-min-mobile	Alias — maps to .-show-min-xs.
.-show-min-phablet	Alias — maps to .-show-min-sm.
.-show-min-sm	Dangos (gwrthdro o -hidden-max-sm) pan fydd y ffenestr ar neu uwchlaw torri pwynt sm (20em); wedi'i guddio fel arall.
.-show-min-small	Alias — maps to .-show-min-sm.
.-show-min-tablet	Alias — maps to .-show-min-md.
.-show-min-x-large	Alias — maps to .-show-min-xl.
.-show-min-x-small	Alias — maps to .-show-min-xs.
.-show-min-xl	Dangos (gwrthdro o -hidden-max-xl) pan fydd y ffenestr ar neu uwchlaw torri pwynt xl (62em); wedi'i guddio fel arall.
.-show-min-xs	Dangos (gwrthdro o -hidden-max-xs) pan fydd y ffenestr ar neu uwchlaw torri pwynt xs (16em); wedi'i guddio fel arall.

Priodweddau arferiad

Eiddo	Math	Diofyn	Disgrifiad
--pantoken-bp-content	<length>	68.75em	Gwerth torri pwynt content (68.75em, wedi'i lunio â llaw, â thema (nid yn y token IR)). Nid yw ei oruchafu yn symud terfynau cyfansoddiad @media/@container i fyny.
--pantoken-bp-content-full-width	<length>	98.75em	Gwerth torri pwynt content-full-width (98.75em, wedi'i lunio â llaw, â thema (nid yn y token IR)). Nid yw ei oruchafu yn symud terfynau cyfansoddiad @media/@container i fyny.
--pantoken-bp-lg	<length>	48em	Gwerth torri pwynt lg (48em, sy'n adlewyrchu --instui-component-tray-width-lg). Nid yw ei oruchafu yn symud terfynau cyfansoddiad @media/@container i fyny.
--pantoken-bp-md	<length>	30em	Gwerth torri pwynt md (30em, sy'n adlewyrchu --instui-component-tray-width-md). Nid yw ei oruchafu yn symud terfynau cyfansoddiad @media/@container i fyny.
--pantoken-bp-sm	<length>	20em	Gwerth torri pwynt sm (20em, sy'n adlewyrchu --instui-component-tray-width-sm). Nid yw ei oruchafu yn symud terfynau cyfansoddiad @media/@container i fyny.
--pantoken-bp-xl	<length>	62em	Gwerth torri pwynt xl (62em, sy'n adlewyrchu --instui-component-tray-width-xl). Nid yw ei oruchafu yn symud terfynau cyfansoddiad @media/@container i fyny.
--pantoken-bp-xs	<length>	16em	Gwerth torri pwynt xs (16em, sy'n adlewyrchu --instui-component-tray-width-xs). Nid yw ei oruchafu yn symud terfynau cyfansoddiad @media/@container i fyny.

Amodau

Math	Ymchwiliad	Disgrifiad
media	(max-width: 16em)	Terfyn uchaf torri pwynt xs.
media	(min-width: 16em)	Terfyn isaf torri pwynt xs.
media	(max-width: 20em)	Terfyn uchaf torri pwynt sm.
media	(min-width: 20em)	Terfyn isaf torri pwynt sm.
media	(max-width: 30em)	Terfyn uchaf torri pwynt md.
media	(min-width: 30em)	Terfyn isaf torri pwynt md.
media	(max-width: 48em)	Terfyn uchaf torri pwynt lg.
media	(min-width: 48em)	Terfyn isaf torri pwynt lg.
media	(max-width: 62em)	Terfyn uchaf torri pwynt xl.
media	(min-width: 62em)	Terfyn isaf torri pwynt xl.
media	(max-width: 68.75em)	Terfyn uchaf torri pwynt content.
media	(min-width: 68.75em)	Terfyn isaf torri pwynt content.
media	(max-width: 98.75em)	Terfyn uchaf torri pwynt content-full-width.
media	(min-width: 98.75em)	Terfyn isaf torri pwynt content-full-width.
container	(max-width: 16em)	Terfyn uchaf torri pwynt xs, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(min-width: 16em)	Terfyn isaf torri pwynt xs, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(max-width: 20em)	Terfyn uchaf torri pwynt sm, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(min-width: 20em)	Terfyn isaf torri pwynt sm, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(max-width: 30em)	Terfyn uchaf y pwynt torri md, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(min-width: 30em)	Terfyn isaf y pwynt torri md, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(max-width: 48em)	Terfyn uchaf y pwynt torri lg, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(min-width: 48em)	Terfyn isaf y pwynt torri lg, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(max-width: 62em)	Terfyn uchaf y pwynt torri xl, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(min-width: 62em)	Terfyn isaf y pwynt torri xl, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(max-width: 68.75em)	Terfyn uchaf y pwynt torri content, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(min-width: 68.75em)	Terfyn isaf y pwynt torri content, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(max-width: 98.75em)	Terfyn uchaf y pwynt torri content-full-width, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.
container	(min-width: 98.75em)	Terfyn isaf y pwynt torri content-full-width, wedi'i werthuso yn erbyn cynhwysydd wedi'i farcio.

Tocynnau a ddefnyddiwyd

Token	Math	Gwerth
--instui-component-tray-width-lg	<length>	48em
--instui-component-tray-width-md	<length>	30em
--instui-component-tray-width-sm	<length>	20em
--instui-component-tray-width-xl	<length>	62em
--instui-component-tray-width-xs	<length>	16em