Ответы пользователя по тегу Вёрстка
  • Как отрисовать расписание и адаптировать?

    Liatano
    @Liatano
    Для начала вы бы определились,а как оно будет выглядеть на мобильной версии, как будет выглядеть при переполнении(несколько записей в одной ячейке), а потом уже определяться с версткой.
    ИМХО(да и не только мое), верстать нужно всегда с мобильной версии, с оглядкой на десктопную,а не наоборот. И дело не только в принципе Mobile First от Google, но и в том,что в мобильном варианте элементы идут в порядке потока информации,а на декстопе уже перемешиваются(перескакивают вправо-лево). если делать в обратном порядке, придется идти более сложным путем, т.к. придется менять элементы по вертикали, если изначальный порядок не был правильно угадан.

    Если предугадать высоту ячеек нельзя, то лучший способ-это таблицы. Да и в целом - он самый простой. На мобильной версии либо добавляется скролл, либо творится непотребство в виде задания ячейкам и строкам display:block (вполне ходовой вариант,не стоит бояться). Основная проблема таблиц: в ячейках не совсем одинаково может работать position:absolute.
    Ответ написан
    Комментировать
  • Почему жирность текста в css отличается от жирности текста в макете figma?

    Liatano
    @Liatano
    Для изменения жирности нужно подгрузить шрифт с этой жирностью. Браузер сам, конечно, может некоторым образом симулировать жирность или курсив, но если шрифт не системный для каждой жирности, начертания и их сочетаний нужно подгружать свои файлы. При этом их нужно еще корректно объявлять, например:
    @font-face {
    	font-family: 'Commissioner';
    	src: url('fonts/Commissioner/Commissioner-Regular.eot');
    	src: local('Commissioner Regular'), local('Commissioner-Regular'),
    		url('fonts/Commissioner/Commissioner-Regular.eot?#iefix') format('embedded-opentype'),
    		url('fonts/Commissioner/Commissioner-Regular.woff2') format('woff2'),
    		url('fonts/Commissioner/Commissioner-Regular.woff') format('woff'),
    		url('fonts/Commissioner/Commissioner-Regular.ttf') format('truetype');
    	font-weight: normal;
    	font-style: normal;
    }
    @font-face {
    	font-family: 'Commissioner';
    	src: url('fonts/Commissioner/Commissioner-Medium.eot');
    	src: local('Commissioner Medium'), local('Commissioner-Medium'),
    		url('fonts/Commissioner/Commissioner-Medium.eot?#iefix') format('embedded-opentype'),
    		url('fonts/Commissioner/Commissioner-Medium.woff2') format('woff2'),
    		url('fonts/Commissioner/Commissioner-Medium.woff') format('woff'),
    		url('fonts/Commissioner/Commissioner-Medium.ttf') format('truetype');
    	font-weight: 500;
    	font-style: normal;
    }

    имя у шрифта одно, а вот жирность разная. При этом лучше не забывать о разных браузерах а также о том,что шрифты могут быть в системе пользователя(в этом случае ничего грузиться не будет). В целом, формат .eot - это атавизм для IE, но до сих пор лежит в готовых паках до кучи.
    Ответ написан
    1 комментарий