• Под какие разрешения рисовать адаптивный дизайн?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    При рисовании любого дизайна встает техническая задача — уместить элементы сайта в указанную ширину. Уместить в заданную ширину тяжелее, чем растянуть до заданной ширины. Растянуть легко на этапе верстки. Поэтому нужно ориентироваться на минимальную ширину в классе.

    1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

    2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

    3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

    В принципе, этого достаточно, чтобы верстальщик справился.

    Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.

    В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

    Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.
    Ответ написан
    Комментировать
  • Не корректно работает rewriteRule в htaccess?

    shambler81
    @shambler81 Куратор тега htaccess
    RewriteEngine on
    RewriteBase /
    Options +FollowSymlinks
    AddDefaultCharset UTF-8
    ErrorDocument 404 /404.php
    
    
    ############################################################################
    #### Выбор основного зеркала (с www или без www)                        ####
    ############################################################################
       # 2. Добавить www
    RewriteCond %{ENV:HTTPS} on
        #Если включен https
    RewriteRule .* - [E=SSL:s]
        #То создаем переменную  ssl с текстом s
    RewriteCond %{HTTP_HOST} !^www\.(.*) [NC]
        # Если нет www в начале домена
    RewriteCond %{REQUEST_URI} !^/robots.*
    	# ваш robots.txt
    RewriteRule ^(.*)$ http%{ENV:SSL}://www.%{HTTP_HOST}/$1 [R=301,L]
        #Подставляем www и https если он включен.
    ############################################################################
    #### Перенаправляем протокол http на https                              ####
    ############################################################################
    RewriteCond %{HTTPS} off
       # Проверяем наличие https в URL.
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
       # Перенаправляем протокол на http.
    
    ############################################################################
    #### Убираем index.php, если он есть в конце URL                        ####
    ############################################################################
    RewriteCond %{REQUEST_URI} ^(.*)/index\.php$
       # URL cодержит index.php в конце.
    RewriteCond %{REQUEST_METHOD} =GET
       # Выявляем GET запрос в URL (не POST).
    RewriteRule ^(.*)$ %1/ [R=301,L]
       # Удалить index.php из URL.
    
    ############################################################################
    #### Убираем повторяющиеся слеши (/) в URL                              ####
    ############################################################################
    RewriteCond %{THE_REQUEST} //
       # Проверяем, повторяется ли слеш (//) более двух раз.
    RewriteCond %{QUERY_STRING} !http(s|)://
      # Убедимся что это не урл в  GET
    RewriteRule .* /$0 [R=301,L]
       # Исключаем все лишние слеши.
    
    ############################################################################
    #### Убираем слеши в конце URL для статических файлов (содержит точку)  ####
    ############################################################################
    RewriteCond %{REQUEST_URI} \..+$
       # Если файл содержит точку.
    RewriteCond %{REQUEST_FILENAME} !-d
       # И это не директория.
    RewriteCond %{REQUEST_FILENAME} -f
       # Является файлом.
    RewriteCond %{REQUEST_URI} ^(.+)/$
       # И в конце URL есть слеш.
    RewriteRule ^(.+)/$ /$1 [R=301,L]
       # Исключить слеш.
    
    ############################################################################
    #### Добавляем слеш(/), если его нет, и это не файл.                    ####
    ############################################################################
    RewriteCond %{REQUEST_URI} !(.*)/$
       # Если слеша в конце нет.
    RewriteCond %{REQUEST_FILENAME} !-f
       # Не является файлом.
    RewriteCond %{REQUEST_URI} !\..+$
       # В URL нет точки (файл).
    RewriteCond %{REQUEST_URI} ^(.+)$
     # В URL есть хоть один символы
    RewriteRule ^(.*)$ $1/ [L,R=301]
       # Добавляем слеш в конце.
    
    ############################################################################
    #### Компрессия статического контента для гугл  спид тест               ####
    ############################################################################
    <IfModule mod_deflate.c>
      AddType image/svg+xml .svg
      AddOutputFilterByType DEFLATE image/svg+xml  
      AddOutputFilterByType DEFLATE application/rss+xml
      AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
      AddOutputFilterByType DEFLATE application/x-font
      AddOutputFilterByType DEFLATE application/x-font-opentype
      AddOutputFilterByType DEFLATE application/x-font-otf
      AddOutputFilterByType DEFLATE application/x-font-truetype
      AddOutputFilterByType DEFLATE application/x-font-ttf
      AddOutputFilterByType DEFLATE application/x-javascript
      AddOutputFilterByType DEFLATE application/xhtml+xml
      AddOutputFilterByType DEFLATE application/xml
      AddOutputFilterByType DEFLATE font/opentype
      AddOutputFilterByType DEFLATE font/otf
      AddOutputFilterByType DEFLATE font/ttf
      AddOutputFilterByType DEFLATE image/svg+xml
      AddOutputFilterByType DEFLATE image/x-icon
      AddOutputFilterByType DEFLATE text/css
      AddOutputFilterByType DEFLATE text/html
      AddOutputFilterByType DEFLATE text/javascript
      AddOutputFilterByType DEFLATE text/plain
      AddOutputFilterByType DEFLATE text/xml
      AddOutputFilterByType DEFLATE image/svg+xml
    </IfModule>
    <IfModule mod_expires.c>
      ExpiresActive on
      ExpiresByType image/jpeg "access plus 1 year"
      ExpiresByType image/svg "access plus 1 year"
      ExpiresByType image/gif "access plus 1 year"
      ExpiresByType image/png "access plus 1 year"
      ExpiresByType text/javascript "access plus 1 year"
      ExpiresByType text/css "access plus 1 year"
      ExpiresByType application/javascript "access plus 1 year"
      ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
      ExpiresByType application/x-font-ttf "access plus 1 year"
      ExpiresByType application/x-font-opentype "access plus 1 year"
      ExpiresByType application/x-font-woff "access plus 1 year"
      ExpiresByType image/svg+xml "access plus 1 year"
    </IfModule>
      <IfModule mod_headers.c>
      <filesmatch "\.(ico|flv|jpg|jpeg|webp|png|gif|css|swf)$">
      	Header set Cache-Control "max-age=31536000, public"
      </filesmatch>
      <filesmatch "\.(html|htm)$">
      	Header set Cache-Control "max-age=7200, private, must-revalidate"
      </filesmatch>
      <filesmatch "\.(pdf)$">
      	Header set Cache-Control "max-age=86400, public"
      </filesmatch>
      <filesmatch "\.(js|otf|ttf|woff|woff2)$">
      	Header set Cache-Control "max-age=31536000, private"
      </filesmatch>
      </IfModule>
    ############################################################################
    #### Конец общей части, далее следует собственные директивы .htaccess   ####
    ############################################################################
    
    RewriteRule ^([^/.]*)/?$             	      index.php\?la\=$1 [QSA,L]
    RewriteRule ^(.*)/(.*)/?$                     index.php\?la\=$1&url\=$2 [QSA,L] #/ru/forecast/
    RewriteRule ^(.*)/(.*)/(.*)/?$                index.php\?la\=$1&url\=$2&country\=$3 [QSA,L] #/ru/forecast/Russia/
    RewriteRule ^(.*)/(.*)/(.*)/(.*)/?$           index.php\?la\=$1&url\=$2&country\=$3&region\=$4 [QSA,L] #/ru/forecast/Russia/Murmansk
    RewriteRule ^(.*)/(.*)/(.*)/(.*)/(.*)/?$      index.php\?la\=$1&url\=$2&country\=$3&region\=$4&city\=$5 [QSA,L] #/ru/forecast/Russia/Murmansk/Apatity
    RewriteRule ^(.*)/(.*)/(.*)/(.*)/(.*)/(.*)/?$ index.php\?la\=$1&url\=$2&country\=$3&region\=$4&city\=$5&dop\=$6 [QSA,L] #/ru/forecast/Russia/Murmansk/Apatity/10days - <b>ЗДЕСЬ ПРОБЛЕМА!!!</b>
    
    #########RewriteCond %{THE_REQUEST}  !images
    ########RewriteCond %{THE_REQUEST}  !tr
    ######## А где рул !!!

    Я тут подправил некоторые пункты, так что можешь посмотреть.
    теперь что по поводу твоей пролемы, тут все просто, у тебя частные случаи срабатывают позней общих.
    А в .* у тебя включиться может и / так что это удовлетворяет условию
    если ты хочешь их исключить то пожалуйста вставь в каждую группу [^/] - исключить символ
    ну или попробуй просто поменять местами. как я тебе показал, возможно этого вполне хватит поскольку .htaccess читается с верух в низ. и правила применяются вначале сверху потом снизу ( если до него дойдет)
    Ответ написан
    1 комментарий
  • Почему htaccess редирект добавляет 2 раза параметры в адресную строку?

    shambler81
    @shambler81 Куратор тега htaccess
    не вижу у вас тут ни одгого правила которое могло бы затронуть GET параметр.
    Надеюсь вы не этим пытаетесь его выцепить ?%{REQUEST_URI}
    Ответ написан
    1 комментарий