WordPress 7.1 responsive breakpoints: Yuav kuaj li cas?

WordPress 7.1 responsive breakpoints pab koj kuaj thiab kho qhov website kom haum rau Mobile, Tablet thiab Default ncaj qha hauv WordPress editor. Yog siv block theme uas sib haum, koj hloov tau qhov loj ntawm ntawv, qhov nrug, qhov dav, xim, ciam teb thiab qee yam ntawm layout hauv Site Editor, tsis tas sau CSS kev cai rau txhua qhov screen size (raws li wordpress.org)

Txawm li ntawd los, yuav tsum cais ob yam no kom meej: tus thawj tswj hwm siv tau qhov interface los kuaj responsive styles, hos kev txheeb kom meej ib qho breakpoint tshiab hauv theme.json feem ntau yog txoj haujlwm ntawm theme tus tsim lossis tus neeg uas muaj cai kho theme cov ntaub ntawv. Kab lus no qhia ib txoj kev siv tiag tiag los kuaj qhov website ntawm xov tooj, nrhiav teeb meem thiab kho nyob hauv yam uas WordPress 7.1 txhawb.

WordPress 7.1 responsive breakpoints ua haujlwm li cas?

WordPress 7.1 muaj cov viewport states los siv tus nqi style sib txawv rau tib lub block. Raws li qhov teeb tsa qub, Mobile siv rau cov screen uas dav tsis tshaj 480px, Tablet siv rau cov screen uas dav tshaj 480px txog 782px, hos Default yog tus nqi hauv paus uas siv rau txhua qhov dav yog tsis muaj qhov override cais (raws li developer.wordpress.org).

State	Qhov dav screen raws li qhov teeb tsa qub	Lub ntsiab lus thaum kho	Piv txwv tsim nyog
Default	Txhua qhov dav	Tus nqi hauv paus thiab tus nqi hloov chaw	Title ntawv loj 48px
Tablet	Tshaj 480px txog 782px	Tsuas override hauv cheeb tsam Tablet	Txo block qhov padding
Mobile	Tsis tshaj 480px	Tsuas override hauv cheeb tsam Mobile	Hloov title kom tshuav 32px

Qhov uas ua rau neeg to taub yuam kev yooj yim yog Tablet thiab Mobile tsis inherit ib leeg. Yog koj teeb ib qho font size cais rau Tablet tab sis tsis teeb rau Mobile, Mobile yuav rov qab siv tus nqi Default, tsis yog siv tus nqi Tablet cia li. Yog li, thaum xav tsim kom cov screen me muaj qauv zoo ib yam, yuav tsum kuaj ob lub state no tib si.

Theme yuav hloov tau cov nqi teeb tsa qub no hauv theme.json. Yog li, 480px thiab 782px tsuas yog cov cim qhia siv xwb; tsis yog lus cog tseg tias txhua lub WordPress 7.1 website yuav siv raws nraim ob tus lej no. WordPress nyeem theme cov viewport settings ces tsim cov media queries uas sib haum.

Yam yuav tsum npaj ua ntej

Website tab tom khiav WordPress 7.1 lossis version tshiab dua.
Theme uas tab tom siv yog block theme uas txhawb Site Editor.
Koj tus account muaj cai kho Styles, template lossis block.
Nplooj ntawv uas yuav kuaj twb muaj cov ntsiab lus sawv cev xws li title, duab, khawm, kem thiab menu.
Nqis tes kuaj hauv daim ntawv theej tseg lossis staging environment ua ntej hloov lub website uas tab tom siv tiag.

Yog website tseem siv classic theme, tej zaum koj yuav tsis pom tag nrho cov kev xaiv Responsive styles. Thaum zoo li ntawd, xub txheeb xyuas seb theme puas txhawb Site Editor; tsis txhob siv sijhawm nrhiav ib lub responsive khawm hauv qhov interface qub. Koj kuj nyeem ntxiv tau txog txoj kev xaiv WordPress theme uas haum yog koj tab tom xav hloov mus rau block theme.

Txoj kev kuaj qhov website ntawm xov tooj hauv Site Editor

Kuaj tag nrho cov style ntawm ib hom block

Hauv nplooj tswj hwm, qhib Appearance > Editor lossis Appearance > Editor.
Qhib lub vaj huam sib luag Styles, ces xaiv Blocks.
Xaiv hom block uas xav kuaj, xws li Heading, Button, Group lossis Image.
Qhib daim ntawv teev cov xwm txheej nyob rau saum lub vaj huam sib luag thiab nrhiav pawg Viewport.
Xaiv Default, Tablet lossis Mobile kom pom tus nqi style uas tab tom siv.
Hloov ib qho property uas tau txais kev txhawb nqa, xws li font size, padding, margin, background color lossis width.
Hloov mus los ntawm cov viewport, ces siv khawm Preview los kuaj qhov sib txawv ua ntej khaws cia.

Txoj kev no haum thaum koj xav kom txhua lub block tib hom siv tib txoj cai. Piv txwv, yog tias txhua lub heading qib ob hauv lub website loj dhau hauv xov tooj, mus rau Styles > Blocks > Heading, xaiv Mobile thiab txo font size. Qhov kev hloov no siv thoob plaws tag nrho lub site, yog li yuav tsum kuaj homepage, posts, archive pages thiab templates ua ntej nias Save.

Kuaj ib lub block xwb

Qhib nplooj ntawv, tsab xov xwm, template lossis pattern uas xav kuaj.
Hauv toolbar saum toj, qhib cov ntawv qhia View thiab qhib Responsive styles.
Hloov hom kev saib mus rau Tablet lossis Mobile.
Xaiv lub block ntawd, ces qhib lub vaj huam sib luag Settings.
Hauv ntu Styles, kho cov property uas xav sim, xws li Typography, Dimensions, Spacing, Color lossis Border.
Hloov rov qab mus rau Default kom paub tseeb tias qhov style tseem ceeb tsis tau hloov yam tsis tau npaj siab.

Qhov no yog qhov kev xaiv nyab xeeb dua thaum qhov teeb meem tsuas tshwm hauv ib cheeb tsam xwb. Piv txwv, ib lub khawm hauv ntu qhia paub tej zaum yuav dav dhau ntawm xov tooj, hos lwm cov khawm tseem zoo. Koj tsuas yuav tsum txo padding lossis teeb qhov dav kom haum rau lub block ntawd, tsis yog hloov tag nrho cov Button hauv lub website.

WordPress yuav qhia daim nhyav viewport hauv vaj huam sib luag Settings thaum koj tab tom kho Tablet lossis Mobile. Yog koj tsis pom Responsive styles lossis pawg Viewport, tus thawj tswj hwm tej zaum tau kaw qhov peev xwm kho responsive styles; cov setting uas tau khaws cia ua ntej tseem yuav raug siv kom raug tau (raws li daim ntawv teev Responsive styles)

Yog koj nquag yuav tsum qhib ntau nplooj ntawv los kuaj, muab txoj kev no txuas nrog browser website inspection tool kom txo lub sijhawm hloov ntawm ntau hom kev saib.

Kho breakpoint hauv theme.json thiab txheeb xyuas qhov tshwm sim

Hauv WordPress 7.1, tus tsim theme muaj peev xwm txhais breakpoint rau Mobile thiab Tablet hauv theme.json . Qhov no yog theme configuration, tsis yog ib qho custom CSS uas muab sau rau hauv Additional CSS. Thaum breakpoint hloov, responsive styling thiab qee yam txheej txheem uas tswj kev tso block raws viewport yuav siv cov nqi tshiab (raws li nplooj tso tawm WordPress 7.1).

Cov neeg siv ib txwm tsis tas yuav hloov cov ntaub ntawv no. Yog koj tsuas xav kom qhov interface zoo dua hauv xov tooj, xub siv cov kev tswj Responsive styles uas twb muaj lawm. Tsuas tsim nyog thov kom kho theme.json thaum breakpoint tam sim no tsis haum rau tus qauv tsim, xws li layout hloov ua ntau kem ntxov dhau lossis lig dhau piv rau qhov breakpoint ntawm theme.

Txheej txheem kuaj tom qab kho

Xaiv ib nplooj ntawv sawv cev uas muaj ntau hom block thiab cov ntsiab lus ntev.
Hauv Site Editor, kuaj Default, Tablet thiab Mobile ib qho zuj zus.
Saib xyuas heading, khawm, duab, kem, rooj, menu thiab cov block uas muaj xim tom qab.
Siv Preview los saib daim qauv uas ze rau qhov neeg siv pom, tsis txhob vam khom rau lub moj khaum kho xwb.
Yog ua tau, qhib nplooj ntawv hauv browser tiag tiag ntawm xov tooj.
Kuaj tig xov tooj ua kab rov tav, zoom browser, qhov ntev ntawm heading thiab cov ntsiab lus uas siv lus ntev.
Yog qhov interface sab nraud tseem tsis tau hloov tshiab, tshem cache, ces kuaj dua hauv qhov rais private.

Tsis txhob kuaj tsuas yog ib qhov loj me uas muaj hauv editor xwb. Ib qho interface yuav zoo li tsis muaj teeb meem ntawm 390px tabsis yuav dav dhau ntawm thaj tsam 500–700px, tshwj xeeb thaum siv kem, khawm uas muaj ntawv ntev lossis duab uas muaj qhov dav ruaj. Maj mam rub lub moj khaum saib kom dav thiab nqaim kom nrhiav lub sijhawm uas layout pib tawg.

Teeb meem uas nquag ntsib thiab txoj kev kho

Kho Tablet tabsis Mobile tsis hloov: teeb tus nqi Mobile cais, vim ob lub xwm txheej no tsis tau txais tus nqi ncaj qha los ntawm ib leeg.
Tsis pom qhov kev xaiv responsive: kuaj seb puas yog WordPress 7.1+, puas siv block theme, seb tus account puas muaj cai thiab seb qhov kev teeb tsa ntawm tus thawj tswj hwm puas raug.
Hloov hauv Site Editor tabsis nplooj ntawv sab nraud tsis zoo ib yam: kuaj dua template uas nplooj ntawv siv, cache, plugin uas optimize CSS thiab style cais ntawm lub block.
Xav zais lub block hauv xov tooj: Yog lub theme lossis block txhawb, siv qhov kev xaiv qhia/ntaub hauv lub tshuab raj peb teev; kev hloov font size tsis tuaj yeem hloov tau txoj haujlwm no.
Toolbar tseem siv ib yam rau txhua lub vijtsam: qee yam kev tswj, xws li kho kab ntawv kom nyob nruab nrab lossis nyob rau ib sab, siv rau txhua lub viewport thiab tsis muaj tus nqi tshwj xeeb rau Mobile.

Yog koj tab tom npaj hloov kho WordPress lossis theme, tsim nyog muab kev tshuaj xyuas responsive txuas nrog checklist kuaj plugin thiab theme rau WordPress 7.1. Responsive styles yuav tshwm sim raug hauv editor, tabsis tseem raug cuam tshuam los ntawm plugin uas tsim block, cache plugin lossis CSS uas theme twb tau load cia lawm.

Hauv qab no, WordPress 7.1 responsive breakpoints muaj txiaj ntsig tshaj thaum koj siv nws ua ib txoj haujlwm kuaj: txheeb xyuas viewport uas muaj teeb meem, kho kom raug raws li qhov cuam tshuam, rov kuaj Default–Tablet–Mobile, ces txheeb xyuas dua hauv browser tiag. Koj tsis tas yuav sau CSS ntxiv rau cov property uas block thiab theme twb txhawb lawm. Txawm li cas los xij, breakpoint cais hauv theme.json, tus cwj pwm ntawm block uas tsim ntxiv thiab teeb meem los ntawm CSS sab nraud tseem yuav xav kom theme tus sau lossis tus tsim kho software daws.