autit

Newbie
  • Content count

    22
  • Joined

  • Last visited

Community Reputation

0 Обычная

About autit

  • Rank
    Новичок

Information

  • Sex
    Мужчина
  • Interests
    Адаптивная верстка
  1. Ну, с развитием понятно... Как дела с заработком? О фрилансе 2012 года Viper пишет - Без опыта работы, портфолио и, предположительно, слабыми навыками сразу на фриланс/на дому? Очень сложно... skygazer пишет - Да фриланс это довольно больная тема, новичку заказ получить трудно.
  2. Сижу... носом пузыри пускаю... срочно нужно выяснить как обстоят дела с работой. Хочу узнать как успехи у недавно окончивших обучение. Есть ли смысл браться за работу? Планирую работать по патенту (или что-то вроде того). https://htmlforum.io/topic/57661-pomogite-vybrat-rabota-po-patentu/
  3. http://caniuse.com/ поддерживают не все ... <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">Opera Mini - не поддерживает UC Browser for Android - не поддерживает Blackberry Browser - IE Mobile - Значит ли это, что они понимают эту строку так -<img src="image.jpg" alt=""> не работает ваш эмулятор. Пойду тестировать на реальных мобильниках.
  4. Не очень понял. при смене ориентации в мобильнике просто как будто меняется местами ширина и высота. То есть если было 100x200, то станет 200x100. В статье есть про это, но как-то не очень ясно.Поясню. Загрузился сайт, получил<meta name="viewport" content="width=device-width, initial-scale=1.0">@media (min-width:320px) and (max-width:767px){.container{ width:320px;} .col{display:none}}@media (min-width:768px) and (max-width:1023px){.container{ width:768px;} .col{width:230px;}}Мобильник был в положении портрет, загрузилась версия с одной колонкой шириной 320. поменяли ориентацию.Судя по вышеприведенной статье content=width=device-width "удерживает" вьюпорт страницы прежним и в него встраивает версию сайта с двумя колонками шириной 768.В два раза шире... не факт что влезет в экран полностью.Получается что то не то или я плохо понял? Также, как и компьютеры. Я неправильно поставил вопрос. Какой сейчас есть простой хороший метод для Подстраиваемых изображений? Делаю сайт с видом на будущее. Перекраивать большое количество фотографий у меня нет желания. В будущем ретина дисплей видимо будет применяться... но судя по статье даже продвинутые в 2011 не знали к чему дело пойдет... Как Подстраиваемые изображения можно сделать средствами CSS и media запросами? Цель подсунуть мобильникам только ту фотографию, которая хорошо смотрится на данном экране, а другие варианты не загружать.Ссылочку пожалуйста. Ну, например такой подход я встречал <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">@media (min-device-width:600px) {img[data-src-600px] {content: attr(data-src-600px, url);}}@media (min-device-width:800px) {img[data-src-800px] {content: attr(data-src-800px, url);}}Желательно ссылку где упомянуто какие браузеры этот подход поддерживают. Кое что новое для себя нашел, но старовата. Сейчас браузеры уже другие. Просьба еще несколько ссылок с современными статьями. Особенно меня интересует тема, которую поднимал выше. Какой из этих двух подходов можно назвать лучшим, с точки зрения взгляда на будущее? И чтобы Подстраиваемые изображения было просто/удобно вставлять. @media (min-width:320px) and (max-width:767px){.container{ width:320px;} .col{display:none}}@media (min-width:768px) and (max-width:1023px){.container{ width:768px;} .col{width:230px;}}Или@media (min-width:320px) and (max-width:767px){.container{width:100%;} .col{display:none}}@media (min-width:768px) and (max-width:1280px){.container{width:100%;} .col{width:23.9%;}}
  5. Отменяет, я понял так - Если ширина viewport не указана, то:для мобильного Safari это 980pxOpera — 850pxAndroid WebKit — 800pxIE — 974pxИ затем, то что получилось масштавируется под экран.а если указана, <meta name="viewport" content="width=device-width, initial-scale=1.0">отменяются эти значения. И мы получаем это _http://www.canbike.org/CSSpixels/ width=device-width Для Apple iPhone 6 Plus - 414x736px. Я про это и раньше знал. swandev У меня беда, по ангийски почти не понимаю, а на русском языке ВСЕ статьи которые посвящены этой теме переводные или авторы сами не понимают о чем пишут. Просьба обьяснить Как мобильники ... обрабатывают странички. ... писать про это долго, поэтому желательно ссылочки на ПРАВИЛЬНЫЕ статьи . Темы Как мобильники обрабатывают ширину странички. (старые мобильники, новые, и что предположительно будет через пару лет) Как мобильники обрабатывают meta viewport content=width=device-width при смене ориентации. ( или что происходит в мобильнике при смене ориентации?) Как мобильники обрабатывают ширину изображений. Как мобильники обрабатывают высоту текста, (почему именно Em, и почему многие все равно пишут px). Физические пиксели, и css пиксели - я знаю что они есть, но не понял что из этого следует...
  6. Непонятки с этой шириной... Я тоже раньше так думал, а сейчас засомневался. Погуглил и вот что нашел На сервисе тестирования http://quirktools.com/screenfly/ выбрать Mobile написано Apple iPhone 6 Plus - 414x736px как это понимать? специально для iPhone 6+ пишут /* ———-- iPhone 6+ ———-- *//* Portrait */@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { ... }/* Landscape */@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { ... } Но под каждый мобильник писать @media у меня нет желания.. Будет ли iPhone 6+ реагировать одновременно и на @media (min-width:1060px) and (max-width:1920px){ ... }такой запрос? Как вы считаете, сервис тестирования _http://quirktools.com/screenfly/ хороший?
  7. Функционал не будет урезан. Задумался... Может я не понимаю в другом месте. Вопрос Про мобильные устройства.Вот пример Apple iPhone 6 Plus 64Gb написано разрешение 1080x1920px 401ppi масштабирование 2,6 А реально это 414x736px. Наших пикселей. На сайте установлен meta<meta name="viewport" content="width=device-width, initial-scale=1.0"/> Когда этот мобильник реагирует на @media , считает изначально что его ширина 1080px или 414px Наших пикселей?
  8. Мобильнику из новых хочу подсунуть вариант сайта с одной колонкой. Реально то он все равно узкий. А, ПК с той же шириной экрана width:1280px - вариант с двумя колонками.
  9. Как закончить вот эти правила @media (min-width:1025px) and (max-width:1280px)...для мобильника... {.container {width:100%;} }@media (min-width:1025px) and (max-width:1280px)... для ПК... {.container {width:960px;} }
  10. Я не удовлетворен, но перейдем к следующему. Разрешение мобильников каждый год увеличивается. Сейчас у меня возник вопрос как с помощью @media отделить CSS : - для мобильников с экраном width:1280px - для ПК с экраном width:1280px Можно ли это сделать только с помощью CSS?
  11. Вот меня и интересует это разное поведение. Задавал подобный вопрос на блогах. Отвечали точно так-же. Чуть подробнее пожалуйста. Я правильно понял что отличие в мобильниках минимальное? Вот как я это вижу: 2 вариант - вроде все просто и понятно - резина. фотографии подстраиваются, кажется вариант с тяжелыми фотографиями. 1 вариант - Простой, пожалуй мне будет с ним легче. непонятно как работает совместно с meta_name="viewport". 3 вариант - вроде - резина, как 2 вариант. зачем нужно было переводить media в em? 4 вариант - у меня вызывает сомнения, сильно вумно. Правильно ли я думаю, что через год-два возможно понадобится переделывать? Может есть какие либо рекомендации? Типа - Лучше выбрать такой вариант:- для быстрой загрузки сайта- для подстройки шрифта - для удобных-легких-больших фотографий Какой из вариантов удобно-просто использовать для экранов повышенного разрешения (для изображений)?
  12. Спасибо! Следующий вопрос media запрос Мне встречались 4 типа media запросов: 1 ширина контейнера в пикселях @media (min-width:320px) and (max-width:767px){.container{ width:320px;} .col{display:none}}@media (min-width:768px) and (max-width:1023px){.container{ width:768px;} .col{width:230px;}}@media (min-width:1024px) {.container{ width:960px;} .col{width:260px;}}2 ширина контейнера в процентах@media (min-width:320px) and (max-width:767px){.container{width:100%;} .col{display:none}}@media (min-width:768px) and (max-width:1280px){.container{width:100%;} .col{width:23.9%;}}@media (min-width:1281px){.container{width:90%;} .col{width:23.9%;}} 3 ширина media в em , контейнера в процентах@media (min-width:80.063em) {.col{width:20%}} 4 редко бывает такое@media screen and (max-width : 520px), screen and (-webkit-min-device-pixel-ratio : 1.3) and (max-width : 640px) and (orientation : landscape),screen and (-webkit-min-device-pixel-ratio : 1.3) and (max-width : 480px) and (orientation : portrait),screen and (-o-min-device-pixel-ratio: 13/10) and (max-width : 640px) and (orientation : landscape),screen and (-o-min-device-pixel-ratio: 13/10) and (max-width : 480px) and (orientation : portrait),screen and (min-resolution: 1.3dppx) and (max-width : 640px) and (orientation : landscape),screen and (min-resolution: 1.3dppx) and (max-width : 480px) and (orientation : portrait) {... }Вопросы Почему ширину контейнера не пишут в сантиметрах или дюймах, так ведь проще? Каковы хорошие и плохие стороны всех этих подходов? Я могу выбрать кажется любой... Какой из приведенных вариантов лучше?Я имею ввиду верстаем новый сайт (без динамических заморочек) с видом на будущее, и чтобы с изображениями было и пользователю хорошо и мне просто.
  13. Про "размыто" Нужны все 5 или достаточно одного? , например <link rel="icon" type="image/png" href="/_uofm_resources/favicon-32x32.png" sizes="32x32">Ну размылось немного... может сойдет для не сильно требовательного пользователя?
  14. Вы неправы. Для профа нужен учитель. Вы правы. Этот форум мне нравится. Можно например как я открыть тему и задавать вопросы Как сделать адаптивный сайт 2015-2017, правда сейчас меня немного гложут сомнения, может правильнее было задавать вопросы отдельно... Нюансы - у новичков личка отключена. Неудобно. Развернутых ответов скорее всего не будет. Придется переспрашивать.
  15. Написал по указанному E-mail- С какой целью вы предложили мне написать? ответ afdw- На форуме лучше задавать вопросы, ответы на которые пригодятся другим. Если вам нужна помощь в создании конкретного вашего сайта - то это лучше делать в личке или в почте. Комментарий- Согласен.- Мне нужна теория. А сайт я сам сверстаю. На форуме мне лучше, если будет неточность/ошибка - модераторы подправят. (личка кстати не работает) Я с мобильными устройствами совершенно незнаком. Думаю не для всех сайтов "наиболее полный вариант" есть смысл делать. Просьба чуть подробнее.Первую строку понимают и подгружают все мобильники?Для каких целей предназначени иконки png, на рабочий стол загрузить? Я думаю 15 строк многовато. Как бы вы сверстали упрощенный вариант, чтобы, с горем пополам, все модели поняли? Где можно найти список, для каких моделей предназначены эти размеры favicon-ХХХХ.png?