изменить сайт для мобильных устройств

Question

У меня есть веб-сайт, и я бы хотел изменить стиль для мобильных устройств (большие кнопки, большие текстовые поля и т. Д.). Как я могу это сделать? HTML файл:

<link href="jquery-ui/css/south-street/jquery-ui-1.10.4.custom.css" rel="stylesheet" media="screen"> 

И CSS файл:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1366px) { 

.name { margin-left:auto; margin-right:auto; color:#369; font-size:50px; text-align:right; width:600px;} 

} 

И ничего не происходит веб-сайт выглядит одинаково на экране и на планшете

Answer 1

Вы должны знать точные размеры пикселя устройства вы пытаясь создать отдельные стили для. Чтобы получить стили в нужном диапазоне.

Лучшая страница, которую я нашел для этого, это CSS Tricks, в ней перечислены все наиболее распространенные медиа-запросы, используемые в CSS. Я думаю, вы найдете там все, что вам нужно! :)

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/