[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6},"actionData","errors","routes/learn.sections_.$id",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":-5,"_18":19,"_20":21,"_22":19,"_23":24},"items",[59,60,61,62],"record",{"_9":25,"_26":21,"_27":-5,"_28":-5,"_29":30,"_31":32,"_33":-5,"_34":-5,"_23":35},"related",[],"members",[],"stages",[],"discussion","page",1,"count",0,"totalPages","__typename","LibraryPage",{"_36":37,"_38":39,"_40":39,"_41":-5,"_42":-5,"_43":-5,"_44":-5,"_45":-5,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":51,"_52":53,"_54":53,"_55":-5,"_56":-5,"_57":-5,"_23":58},"memberCount","level","siteUrl","hours",[-5,-5,-5,-5,-5],"parentId","ck4h36qe30hj80782mm9blxsd","instructions","topicId","LibraryItem","id","ck4h36qjt0hon0782spk44668","name","Responsive Web Design Principles","title","username","fullname","image","intro","description","content","status","uri","type","published",true,"createdAt","2019-12-22T14:08:09.000Z","updatedAt","joinedAt","CreatedBy","Resource","DetailRecord",{"_9":92,"_26":21,"_27":-5,"_28":-5,"_29":93,"_31":37,"_33":94,"_34":-5,"_23":35},{"_9":85,"_26":21,"_27":-5,"_28":-5,"_29":86,"_31":37,"_33":87,"_34":-5,"_23":35},{"_9":76,"_26":21,"_27":-5,"_28":-5,"_29":77,"_31":37,"_33":78,"_34":79,"_23":35},{"_9":63,"_26":21,"_27":-5,"_28":-5,"_29":64,"_31":37,"_33":65,"_34":-5,"_23":35},{"_36":66,"_38":67,"_40":67,"_41":-5,"_42":-5,"_43":-5,"_44":-5,"_45":68,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":51,"_52":69,"_54":69,"_55":-5,"_56":70,"_57":-5,"_23":58},[-5,-5,-5,-5,-5],"

Установите width тега h2 на 80% ширины окна просмотра и width абзаца как на 75% меньшего размера окна просмотра.

","587d78b1367417b2b2512b0c","Make Typography Responsive","

Вместо использования текста em или px для размера вы можете использовать единицы просмотра для гибкой типографии. Единицы просмотра, такие как проценты, являются относительными единицами, но они основаны на разных позициях. Единицы Viewport относятся к размеру видового экрана (ширина или высота) устройства, а проценты относятся к размеру элемента родительского контейнера. Четыре различных видовых экрана:

vw: 10vw будет составлять 10% от ширины vw: 10vw просмотра.
vh: 3vh будет 3% высоты просмотра.
vmin: 70vmin будет на 70% меньше размера vmin: 70vmin просмотра (высота и ширина).
vmax: 100vmax будет на 100% больше размера vmax: 100vmax просмотра (высота и ширина).

","2019-12-22T14:08:15.000Z",{"_36":71,"_41":72,"_42":73,"_43":74,"_23":75},"cjoe87z9f001b0d9683ysg0m4","Fi1osof","Николай Ланец","cjoe87z9f001b0d9683ysg0m4/1787730146575-photo_2026-05-18_01-31-10.jpg","DetailAuthor",{"_36":80,"_38":81,"_40":81,"_41":-5,"_42":-5,"_43":-5,"_44":-5,"_45":82,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":51,"_52":69,"_54":83,"_55":-5,"_56":84,"_57":-5,"_23":58},[-5,-5,-5,-5,-5],"

Установите width и height тега img на половину их исходных значений. В этом случае исходная height и исходная width составляют 200 пикселей.

","d603daab9efc031d55b5b896b","587d78b1367417b2b2512b0a","Use a Retina Image for Higher Resolution Displays","

Самый простой способ сделать ваши изображения «сетчаткой» (и оптимизировать их для дисплеев retina) - это определить их значения width и height как только половину исходного файла. Вот пример изображения, использующего только половину исходной высоты и ширины:

<style>\n  img {\n    height: 250px; \n    width: 250px; \n  } \n</style>\n<img src=\"coolPic500x500.jpg\" alt = \"Самая прекрасная картина\" />

","2021-11-23T05:38:56.000Z",{"_36":71,"_41":72,"_42":73,"_43":74,"_23":75},{"_36":88,"_38":89,"_40":89,"_41":-5,"_42":-5,"_43":-5,"_44":-5,"_45":90,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":51,"_52":69,"_54":69,"_55":-5,"_56":91,"_57":-5,"_23":58},[-5,-5,-5,-5,-5],"

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

","587d78b1367417b2b2512b09","Make an Image Responsive","

Создание изображений с учетом CSS очень просто. Вместо применения абсолютной ширины к элементу: img { width: 720px; } Вы можете использовать:

img {
max-width: 100%;
display: block;
высота: авто;
}

Свойство max-width 100% масштабирует изображение в соответствии с шириной его контейнера, но изображение не будет растягиваться шире его первоначальной ширины. Установка свойства display для блокировки изменяет изображение с встроенного элемента (по умолчанию) на элемент блока в его собственной строке. Свойство height автоматически сохраняет исходное соотношение сторон изображения.

",{"_36":71,"_41":72,"_42":73,"_43":74,"_23":75},{"_36":95,"_38":96,"_40":96,"_41":-5,"_42":-5,"_43":-5,"_44":-5,"_45":97,"_46":-5,"_47":-5,"_48":-5,"_49":-5,"_50":51,"_52":69,"_54":69,"_55":-5,"_56":98,"_57":-5,"_23":58},[-5,-5,-5,-5,-5],"

Добавьте медиа-запрос, чтобы тэг p имел font-size 10px, когда высота устройства меньше или равна 800px.

","587d78b0367417b2b2512b08","Create a Media Query","

Медиа-запросы - это новый метод, введенный в CSS3, который изменяет представление контента на основе разных размеров видовых экранов. Окно просмотра - видимая область пользователя на веб-странице и отличается в зависимости от устройства, используемого для доступа к сайту. Медиа-запросы состоят из типа носителя, и если этот тип носителя соответствует типу устройства, на котором отображается документ, применяются стили. Вы можете иметь столько селекторов и стилей внутри вашего медиа-запроса, сколько хотите. Ниже приведен пример медиа-запроса, который возвращает содержимое, когда ширина устройства меньше или равна 100px: @media (max-width: 100px) { /* CSS Rules */ } и следующий медиа-запрос возвращает содержимое, когда Высота устройства больше или равна 350px: @media (min-height: 350px) { /* CSS Rules */ } Помните, что CSS внутри медиа-запроса применяется только в том случае, если тип материала соответствует типу используемого устройства.

",{"_36":71,"_41":72,"_42":73,"_43":74,"_23":75}]