swandev

48 минут назад, IvanRu08 сказал:

Спасибо. К сожалению не подходит. Нужно чтобы изображением именно увеличивалось.

Вы ведь даже не пробовали, не смотрели документацию, ищете сразу все готовое..

Я 100% уверенностью вам говорю, что в том слайдере есть все что вам нужно

Вот этот точно подойдет, самый простой https://kenwheeler.github.io/slick/

 

Если не ошибаюсь, решает проблему max-height:1000000px для элемента в котором увеличиваются шрифты на мобильных 

viewport с width=device-width для фиксированных сайтов не очень подходит

Использую prepros уже очень давно, в несколько кликов livereload (обновляет и десктоп браузер и мобильный, что экономит кучу времени) и еще куча разных фич.

Даже не знаю чтобы без него делал : )

 

Всем доброго времени суток.

Хотелось бы узнать мнение опытных фрилансеров в адаптивной верстке.

Лучшее тестирование адаптивного сайта - это само устройство, но такого количества устройств явно у фрилансера не найдется. Как же качественное протестировать адаптивный сайт что бы с уверенностью можно было отдать работу заказчику?

P/S. Какими методами пользуетесь вы в вашей практике фриланса?

Chrome - F12 - Ctrl+Shift+M(device mode) Достаточно долго тестирую именно так, но насколько данный метод гарантирует точность, можно ли на него положится?, ведь не просто так, существуют такие платные сайты как browserstack.com

 

В firefox есть режим адаптивного дизайна, в основном там тестирую.

Иногда запускаю симулятор айфона(xcode).

Так же есть несколько личных устройств (смартфон (android), планшет (ios)).

 

Мне как фрилансеру этого достаточно.

 

@Sergik+, а можно взглянуть на твою верстку за 10К?

К сожалению нет, закрытый проект, для себя делаю интересную вещь, выложу сюда как закончу, проблема одна проект для себя пишу на полимере и он достаточно необычный чтобы его просто так оценить.

А по лендингу чо там смотреть то 5-6 экранов, svg банальное, банальная анимация да паралакс, ну ничо особенного, миллион таких лэндингов.

 

а времени сколько уходит на ленд за 10к?

 

8-10 часов в день(работа)

все остальное отдых

я физически больше верстать не могу

 

и так целый месяц?

 

А почему бы и нет? Многие фрилансеры так работают, я так работаю. Бывает конечно 1-2 дня отдыхаешь полностью, но такого нет чтобы строго сб\вс каждую неделю полный отдых. Всегда чем-то занят, там проект, там проект, что-то читаешь\изучаешь постоянно.

 

Да и работаю с удовольствием, особенно когда проект интересный, можно на флексах верстать, адаптивный

 

Вот если бы верстал обычные лендинги месяцами без перерыва, то...

 

Сам с этим столкнулся. Пока только верстальщик, но в сети нашёл код на javascript:

<link rel="stylesheet" type="text/css" href="styles/style.css" /> 

<script>

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

var x = document.getElementsByTagName("link");

var i;

for (i = 0; i < x.length; i++) {

x.href="styles/style_for_phone.css";

}

} 

</script>

А вообще для адаптивного дизайна вот такой полный код:

<link rel="stylesheet" type="text/css" href="styles/style.css" /> 

<link media="only screen and (max-width:1650px)" rel="stylesheet" href="styles/style_1650.css" />

<link media="only screen and (max-width:1560px)" rel="stylesheet" href="styles/style_1550.css" />

<link media="only screen and (max-width:1450px)" rel="stylesheet" href="styles/style_1450.css" />

<link media="only screen and (max-width:1350px)" rel="stylesheet" href="styles/style_1350.css" />

<link media="only screen and (max-width:1210px)" rel="stylesheet" href="styles/style_1210.css" />

<link media="only screen and (max-width:1000px)" rel="stylesheet" href="styles/style_1000.css" />

<link media="only screen and (max-width:850px)" rel="stylesheet" href="styles/style_800.css" />

<script>

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

var x = document.getElementsByTagName("link");

var i;

for (i = 0; i < x.length; i++) {

x.href="styles/style_for_phone.css";

}

} 

</script>

 

Зачем так все сложно? Никто так не делает, во всяком случае я не встречал сайты где так подключены стили.

Подключайте один файл в котором обычные media queries.

 

 

 

И еще одна непонятность: с размером шрифта стратегия хотябы понятна. А как быть с контентом и кнопочками менишечками всякими. Сейчас у среднистатистического смартфона разрешение больше чем у среднистатистического ноута например. Поэтому @media(max-width) не подайдет. По @media handheld - мало информации: судя по документации это свойство срабатывает на каких-то КПК. Как определить на 100% что девайс смарфон?

Подойдет max-width как для смартфона так и для пк, никакой разницы нет. Написав например вот так @media(min-width: 1366px), это применится для среднестатистического ноутбука в котором по ширине 1366px, но не применится для fullhd+ смартфона (например iphone 6+). Вот тут табличка http://www.canbike.org/CSSpixels/ где указаны кол-во пикселей для разных устройств

на osx в chrome и firefox http://take.ms/sg5F8

в safari все хорошо

Суть заключается в том что сделал сайт по предоплате а остальную сумму не получил.

Так вот и вопрос! - Может как то внести какой то код чтобы он неприятности делал сайту и его тяжело было удалить.

Или строку .

Потом вдруг не заплатили можно было запустить процесс !  

Не отдавать исходники до полной оплаты.

 

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

 

Не знаю как хорошо этот способ работает, не было необходимости пробовать

Привык к import, разбиваю на части стили, мне так удобней.

Привык к вложенному &:hover, &:focus и т.д, т.к их всегда много, то это значительно ускоряет разработку

Рабочий бы примерчик

js+css

 

есть плагины:

http://scrollrevealjs.org/

http://mynameismatthieu.com/WOW/

пункты меню не сдвигаются уменьшая отступы пропорционально, а переносятся на другую строку.

 

flexbox?

https://jsfiddle.net/83feb51u/

 

Цель подсунуть мобильникам только ту фотографию, которая хорошо смотрится на данном экране, а другие варианты не загружать.

 

Очень сложно отвечать на ваши вопросы, которые все в одном большом сообщении.

@media    only screen and (-webkit-min-device-pixel-ratio: 2),    only screen and (   min--moz-device-pixel-ratio: 2),    only screen and (     -o-min-device-pixel-ratio: 2/1),    only screen and (        min-device-pixel-ratio: 2),    only screen and (                min-resolution: 192dpi),    only screen and (                min-resolution: 2dppx) {        /* */ }

Я вот тоже не понимаю зачем это, ставьте width=device-width и не думайте там о всяких физических пикселях, с каждым годом их все больше и больше будут делать в телефонах, но они будут настолько маленькие что разницы никакой не заметите, поэтому и есть такое понятие как css пиксели

Сайт должен быть удобный, а не красивый

Одно другому не мешает

Непонятки с этой шириной...

Я тоже раньше так думал, а сейчас засомневался. Погуглил и вот что нашел

На сервисе тестирования

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/ хороший?

есть физические пиксели, а есть css пиксели, если бы у 6 айфона css пиксели ровнялись физическим, то вы бы ничего не увидели, т.к все было бы очень маленькое. Поэтому у 6+ они они как бы "сжимаются" до 736x414

у меня на ретина макбуке например, 2560--> 1440

http://www.canbike.org/CSSpixels/

 

в такой программе разве что лендинги "верстать", срок вчера, цена 300 рублей

Ну видишь какие то плюсы есть, я просто нашел выставил на показ, пускай просто опытные кодеры, про анализируют код который выдает данная программа! мне больше всего это не интересно!

Я сам даже не качал данную программу )

Сам пишу в ST 3 меня он вполне устраивает

Я руками код быстрее напишу, чем буду тыкать в кнопки. Уж тем более в таком отвратительном интерфейсе

И не когда не надо засирать чей то труд,  отвратительный интерфейс ? сделайте лучше тогда!

 

Если по форуму поискать, то такие темы тут уже были.

А код анализировать и не надо много, открываем офф сайт, смотрим код, закрываем офф сайт, верстаем руками.

в такой программе разве что лендинги "верстать", срок вчера, цена 300 рублей

 

https://github.com/metafizzy/isotope

Спасибо!!! Фильтр + возможность сортировки самое оно! Не могу задать вопрос, но все же: может есть пошаговая инструкция на русском языке для чайников, встречали где?

 

Не встречал

учите английский, без него вообще никак в веб разработке

там есть пример на codepen, думаю из него должно быть все понятно,

https://github.com/metafizzy/isotope

я бы за 1 день сделал

Если точки не должны просвечивать, то их и не нужно добавлять, для нижнего блока просто ставим o:h; а  t-o: e убираем

Сделал Лендинг http://top2b.ru/

Оцените: 

1) Блочную верстку (технология табличной верстки)

2) Написание скриптов

3) Общие впечатление о Ленденге

1) Плохо

2) Там подключены jquery плагины, а это != написание скриптов

3) Закрыть и забыть