Отзывчивый дизайн - точный мобильный/phablet/tablet Devices Размеры

Question

Я создаю отзывчивый веб-сайт, используя загрузочные и медиа-запросы. Это хороший старт, однако, когда я сжимаю свой веб-сайт с рабочего стола на мобильное устройство, есть некоторые точки останова, которые делают веб-сайт не таким замечательным. Вместо того, чтобы иметь эту проблему, когда я сокращаю окно браузера, есть ли какие-то конкретные измерения, которые я могу настроить, чтобы иметь отзывчивый веб-сайт на всех устройствах? Если кто-то знает, пожалуйста, напишите как можно подробнее. Я хотел бы знать точные размеры всех мобильных/фаблевых/планшетов, портретных и ландшафтных.

Спасибо.

Answer 1

Существует так много устройств с разнообразием в разрешении экрана. Если вы используете Bootstrap (BS), лучше следить за своими медиа-запросами для стилизации только в некоторых ключевых точках останова, обратите внимание на то, что библиотека BS использовала мобильный подход, так что в основном вы увидите минимальную ширину @mdia. См. Ниже код SCSS от BS.

// Small screen/tablet 
 
$screen-sm:     768px !default; 
 
$screen-sm-min:    $screen-sm !default; 
 

 
// Medium screen/desktop 
 
$screen-md:     992px !default; 
 
$screen-md-min:    $screen-md !default; 
 

 
// Large screen/wide desktop 
 
$screen-lg:     1200px !default; 
 
$screen-lg-min:    $screen-lg !default; 
 

 
/* Extra small devices (phones, less than 768px) */ 
 
/* No media query since this is the default in Bootstrap */ 
 

 
/* Small devices (tablets, 768px and up) */ 
 
@media (min-width: @screen-sm-min) { ... } 
 

 
/* Medium devices (desktops, 992px and up) */ 
 
@media (min-width: @screen-md-min) { ... } 
 

 
/* Large devices (large desktops, 1200px and up) */ 
 
@media (min-width: @screen-lg-min) { ... }

Более подробная информация, here

Answer 2

Вы можете моделировать устройства через браузер, а не уменьшать окно. В Chrome проверьте код (Ctrl + Shift + I), затем выберите «Переключить панель инструментов». Это позволит вам моделировать установленные устройства по умолчанию с размерами. Надеюсь, это будет хорошим началом для вас