CSSда турли экранлар учун верстка кириши

Замонавий дунёда веб-сайт турли ўлчамдаги экранларга эга бўлган қурилмаларда яхши кўриниши керак.

Одатда, қурилмалар тўрт синфга ажратилади: компютерлар (desktop), ноутбуклар, планшетлар (tablet) ва телефонлар (mobile).

Илгари, қадимги замонларда, барча қурилмаларнинг экран ўлчамлари машҳур бўлган, шунга кўра улар жуда оз бўлган. Ва веб-сайтлар маълум рўйхатдаги разрешениеларда тўғри кўриниши учун яратилган.

Ҳозирги пайтда қурилмалар шунчалик кўпайиб бўлдики, веб-сайт яратиш учун мос келадиган разрешениелар рўйхатини тузиш имкони йўқ. Ҳозирда, верстка исталган ўлчамдаги экранда тўғри кўриниши керак, деб ҳисобланади.

Бу макетнинг калит нуқталарида блокларни қайта жойлаштириш орқали амалга оширилади. Бу калит нуқталар маълум қурилмалар учун эмас, балки веб-сайт контенти учун танланади - у яхши кўриниши учун.

Калит нуқталар орасида веб-сайт элементларининг эни ўзгарувчан бўлиши керак, шундайки у экран энига мослаша олсин. Ва калит нуқталарда блоклар бошқа жойларга қайта жойлашади.

Тавсифланган верстка адаптив ёки отзывчи (responsive) деб аталади. Уни ўрганиш билан биз кейинги дарсларда шуғулланамиз.