оригинальная версия версия для слабовидящих контрастная версия выключить изображения включить изображения RSS FEED K2 NEWS

1000 рублей за покупку акций

Понедельник, 11 Март 2019 00:17

CSS : Visible и Hidden

В вопросах сайтостроительства и в большинстве своём – вёрстки сайтов, всё чаще и чаще камнем преткновения у меня оказывается вопрос так или иначе связанный с мобильной версией сайта. Причина банальна – сегодняшним днём развитие новых технологий больше внимания уделяет смартфонам нежели ноутбукам и ПК. Нет, конечно же и последние тоже имеют свои новинки, но там уже нечем удивлять. Мощнее процессор, больше объём дисков, ОЗУ… ну вы поняли. У ноутбуков появилась серия ультрабуков – в принципе то же самое, только более лёгкое и вместе с тем более хрупкое.

И только смартфоны разительно отличаются друг от друга если брать разные поколения. Давеча столкнулся с проблемой, что аппарат Samsung S9 – отказывался «подчиняться» настройкам мобильной версии, долго не мог понять «почему?» - выяснилось, что причина тому – его разрешение дисплея FullHD, ну т.е. ширина настолько большая, что он уже шагает вровень с FullHD мониторами, да да – прощайте козявки дисплеи на планшетах, устаревших мобильниках и 13-15 дюймовых мониторов. У меня ноутбук игровой и то не тянет, притом, что обошёлся мне, как два таких смартфона. Вот и гадай после этого, не лучше было бы взять старенький ноут и такой S9. Нет, конечно же не лучше, всё-таки ноутбук мне нужнее телефона.

Для начала вернусь к тому, что уже было описано касательно мобильной версии:

мобильная версия opencart

Мобильная версия, через «USER-AGENT»

JavaScript мобильная версия сайта

Далее по тексту будет ещё один не описанный ранее метод.

Bootstrap 3: спрятать блок на маленьких экранах

Собственно, речь пойдёт о CSS, хоть я в последнее время всё чаще с CSS ухожу в JavaScript, интересующий меня вопрос решился с помощью следующих элементов:

Мобильные устройства (<768px).visible-xs, .hidden-xs

Планшеты (768px — 992px).visible-sm, .hidden-sm

Десктопы (992px — 1200px).visible-md, .hidden-md

Большие экраны (>1200px).visible-lg, .hidden-lg

Очень полезно будет почитать ( вот это ).

На самом деле, думаю, это далеко не последний мой обзор на тему мобильных версий. Всё-таки близок уже тот день, когда ПК и ноутбуки уйдут в историю, а балом будут править совсем другие устройства.

Спонсоры: