08 - CSS MediaQueries.pdf
Document Details
Uploaded by MagnanimousCloisonnism
Vilnius University
Related
- Cessation Tabagique Presentation 2023
- A Concise History of the World: A New World of Connections (1500-1800)
- Lg 5 International Environmental Laws, Treaties, Protocols, and Conventions
- Ziraat Finans Grubu Uygulamaları
- Psychoanalytic Diagnosis: Understanding Personality Structure
- Dynamics of the Cell Membrane PDF - Istanbul Atlas University
Full Transcript
08. CSS Media Queries Justina Balsė Turinys | Media Queries Responsive web design Media types Mobile-first Desktop-first 2 Responsive web design Media Queries - are a key component of responsive design, which make it possible for CSS to adapt base...
08. CSS Media Queries Justina Balsė Turinys | Media Queries Responsive web design Media types Mobile-first Desktop-first 2 Responsive web design Media Queries - are a key component of responsive design, which make it possible for CSS to adapt based on various parameters or device characteristics. *Flexbox (CSS3) is a layout mode intended to accommodate different screen sizes and different 3 display devices. Justina Balsė Media types Types Logical operators all and print or screen only speech*** , (comma) 4 Pavyzdžiai @media (min-width: 30em) and (orientation: landscape) {... } @media screen and (min-width: 30em) and (orientation: landscape) {... } 5 @media (min-height: 680px), screen and (orientation: portrait) {... } Pavyzdžiai 6 Pavyzdžiai 7 The viewport is the user's visible area of a web page. method to let web designers take control over the viewport, through 8 the tag. Mobile-first with min-width @media (min-width: 768px) { } @media (min-width: 992px) { 9 } @media (min-width: 1200px) { } Desktop-first and max-width @media (max-width: 1200px) { } @media (max-width: 992px) { 10 } @media (max-width: 768px) { } Pavyzdžiai Media Queries for Standard Devices 1, 2, 3 & 4 Columns Responsive Layout Grid layout Adaptive Layouts with Media Queries 11 Kiti šaltiniai Media Queries | developer.mozilla.org Media Queries | htmldog.com 12 Praktika (1) Išbandyti CSS Media Queries ant pasirinkto praktinio darbo; 13 Praktika (2) Duota: index.html, style.css ir rezultatai prie kelių ekranų. Pritaikyti duotą puslapį prie kelių ekranų pagal pavyzdžius. 14 Praktika (3) Pritaikyti 6 temos 3 užduotį prie kelių ekranų. Perrašomos parametro float reikšmės, pločiai. 15 Praktika (4) Pritaikyti 4 temos 2 praktinę užduotį prie kelių ekranų. Perrašomi konteinerių pločiai, display 16 parametro reikšmės. *Praktika (5) Duota: index.html, style.css, IMG Puslapį pritaikyti keliems ekranams: LG, MD, SM. 17 17 Justina Balsė
