Advertisement
  1. Web Design
  2. UX/UI
  3. Responsive Design

Isang Mabilis na Gabay sa Vertical Break Points

Scroll to top
Read Time: 1 min

() translation by (you can also view the original English article)

Maligayang pagdating sa isa pang Envato Tuts+ screencast tutorial! Sa video na ito ako pagpunta sa magbibigay sa iyo ng isang mabilis na panimula sa paggamit ng CSS vertical breakpoint.

Breakpoint ay magkasingkahulugan na may nakikiramay web design; ang mga ito ay ang mga puntos alla quale pinili mong baguhin ang layout ng isang disenyo. Halimbawa, 768px ay isang karaniwang ginagamit na viewport lapad, sa ibaba Aling baka gusto mong ayusin ang iyong mga layout para sa mga aparatong mobile, at higit sa Aling maaari mong isipin blackberries sa mga tuntunin ng desktop.

Gayunman, ang mga breakpoint huwag lamang mag-apply nang pahalang, sa lapad ng viewport ni; maaaring sila ay dumating sa bisa para sa isang bilang ng mga iba't ibang dahilan. Sa tutorial na ito kami ay pagpunta upang tumingin sa vertical breakpoint, Aling ay inilapat na may kaugnayan sa taas ng viewport ni. Ginagamit namin ang mga ito gamit ang min-height and max-height properties Sa loob query CSS media. Tingnan natin ang isang mas malalim na hitsura.

Sa video na ito tinitingnan namin ang mga Sumusunod na pangyayari:

  • Ang pagbabago ng pagpupuwang at laki ng font sa maikling viewports.
  • Pagsasaayos ng mobile sukat nabigasyon sa maikling viewports.
  • Ang pagsasagawa ng isang header o footer nakapirming, Tanging Kapag may sapat na room.
  • Pagsasaayos ng mga seksyon full-screen para sa maikling viewports.

Maging sigurado upang i-download ang source file upang sundin kasama.

Further Reading

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.