A.

Redimensionare imagine folosind latimea (width) în procente

 consider o imagine și o salvez cu lățimea de 300 pixeli
 implementez fisierul HTML care conține imaginea și un text
fisier HTML
<p class="text">Loremipsum dolor sit amet…</p>
<div class="img-wrap" >
<img alt="robots image" class="responsive" src="robots.jpg" >
<p>Loremipsum dolor sit amet</p>
</div>

 fișierul CSS va include o clasă pentru paragraf și una pentru imagine și image wrapper
fisier CSS
p.text {
float:left;
width:60%;
}
div.img-wrap{
float:right;
width:40%;
}

 paragraful va fi mutat la stânga și va avea lățimea de 60 % iar imaginea 40 % pentru a crea un grid
fluid
 voi adăuga o nouă clasă în fisier CSS pentru imagine la care adaug max-width=100% (care dă
posibilitatea imaginii de a fi ajustată de browser când apar schimbări) și adaug proprietatea dinamică
height clasei care determină să se mențină aspectul imaginii.
fisier CSS
img.responsive {
max-width: 100%;
height: auto;
}
B. Creare video responsive folosind % width !
1. Dacă deții sursa video pe site-ul tău  marcatorul video îți dă voie să utilizezi % width
fișier HTML
<style>
video {
max-width: 100%;
height: auto;
}
</style>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

2. Dacă dorești să accesezi un fișier video de pe YouTube sau Vimeo

- se va defini un iFrame în pagină care să conțină elementul video care va fi inserat folosind un
div iar obiectul iFrame va avea proprietățile - 100% width, 100% height și poziție absolute.

Cod HTML Vimeo

<div class="video-wrap">
<iframe src="http://player.vimeo.com/video/52948373?badge=0"
width = "800" height= "450" frameborder="0"></iframe>
</div>

Cod HTML YouTube

<div class="video-wrap">
<object width="800" height="450">
<param name="movie" value="http://www.youtube.com/v/
b803LeMGkCA?version=3&amp;hl=en_US">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/
b803LeMGkCA?version=3&amp;hl=en_US" type="application/x-
shockwaveflash"
width="560" height="315" allowscriptaccess="always"
allowfullscreen="true">
</embed>
</object>
</div>

- fișierul CSS va fi de forma

.video-wrap {
position:relative;
padding-bottom: 55%;
padding-top: 30px;
height: 0;
overflow:hidden;
}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {
position:absolute;
top:0;
width:100%;
height:100%;
 }

- dacă dorim ca elementul video să nu utilizeze întreaga pagină vom folosi pentru limitare
lățime video proprietățile width și max-width astfel:
<div class="video-outer-wrap">
<div class="video-wrap">
<iframe src="http://player.vimeo.com/video/6284199?title=0&b
yline=0&portrait=0" width="800" height="450" frameborder="0">
</iframe>
</div>
</div>
.video-outer-wrap {
width: 500px;
max-width:100%;
}
C. Redimensionare imagine folosind interogari media (media queries)
- e necesară o imagine pe care browser-ul o va redimensona
- codul HTML e simplu <img alt="robot image" src="robot.png">
- o versiune simplă implică definirea unei interogari care va detecta dimensiunea ferestrei browser-
ului și va afisa o imagine mai mare pentru browser cu ecran mai mare de 1024 pixeli și o imagine
mai mică pentru ferestre de browser mai mici și în funcție de condițiile care sunt îndeplinite se vor
utiliza liniile de cod CSS dintre paranteze
@media screen and ( max-width: 1024px ) {…}
@media screen and ( min-width: 1025px ) {…}

- se va adăuga o nouă clasa marcatorului image

<img alt="robot image" src="robot.png" class="responsive"/>

- codul devine
@media screen and ( max-width: 1024px ) {
img.responsive { width: 200px; }
}
@media screen and ( min-width: 1025px) {
img.responsive { width: 300px;}
}
img.responsive { height: auto; }

-dacă dorim mai multe dimensiuni ale ferestrei browser-ului putem utiliza combinat opțiunile max-
width și min-width pentru a realiza interogarile media astfel:
@media screen and ( max-width: 1024px ) {
img.responsive { width: 200px; }
}
@media screen and ( min-width:1025px ) and ( max-width: 1280px ) {
img.responsive { width: 300px; }
}
@media screen and ( min-width: 1081px ) {
img.responsive { width: 400px; }
}
img.responsive { height: auto; }
D. Modificare meniu navigare folosind interogari media (media queries)
- se poate realiza un meniu responsive folosind 2 meniuri diferite iar afisarea acestora se
realizează dinamic pentru 3 dimensiuni diferite ale ecranului de browser
- pentru fereastra de dimensiunea cea mai mică de browser – telefon, tabletă se va implementa
un meniu select care ocupă puțin spațiu vertical și care folosește un element form pentru
opțiunile de navigare care atunci cândsunt selectate apelează cod JavaScript
<div class="small-menu">
<form>
<select name="URL" onchange="window.location.href=this.form.
URL.options[this.form.URL.selectedIndex].value">
<option value="blog.html">My Blog</option>
<option value="home.html">My Home Page</option>
<option value="tutorials.html">My Tutorials</option>
</select>
<form>
</div>

- pentru fereastra de browser de dimensiunea cea mai mare se va defini o listă simplă de tip ul
care va fi formatată în cadrul fișierului CSS, iar meniul va fi inserat în aceeași pagină
utilizând select
<div class="large-menu">
<ul>
<li>
<a href="blog.html">My Blog</a>
</li>
<li>
<a href="home.html">My Home Page</a>
</li>
<li>
<a href="tutorials.html">My Tutorials</a>
</li>
</ul>
</div>

- pentru ca meniul să devina resposive trebuie definite interogări media astfel – pentru fereastra
de browser mai mică de 800 px se va utiliza formular select cu clasa CSS small-menu iar
pentru dimsniuni mai mari lista ul cu clasa CSS large-menu și se va crea un efect de
modificare a meniului de navigare pentru ferestre de browser mai mari de 801 px.
@media screen and ( max-width: 800px ) {
.small-menu { display:inline; }
.large-menu { display:none; }
}
@media screen and ( min-width: 801px ) and ( max-width: 1024px ) {
.small-menu { display:none; }.
.large-menu { display:inline; }
}
@media screen and ( min-width: 1025px ) {
.small-menu { display:none; }
.large-menu { display:inline; }
}

- pentru meniul corespunzător fereastrei de dimensiune medie se poate folosi codul CSS de
mai jos pentru afișarea listei ca un meniu orizontal de navigare
.large-menu ul{
list-style-type:none;
}
.large-menu ul li {
display:inline;
}

- pentru a implementa meniul pentru o dimensiune intermediară de browser (801 px – 1024 px)
vom insera o noua interogare media astfel
@media screen and ( min-width: 801px ) and (max-width: 1024px ) {
.small-menu {
display:none;
}
.large-menu {
display:inline;
 }
.large-menu ul {
list-style-type:none;
}
.large-menu ul li {
display:inline;
}
}
@media screen and (min-width: 1025px ) {
.small-menu {
display:none;
}
.large-menu {
display:inline;
}
}

- pentru a fi și mai resposive, meniul pentru dimensiune medie de browser va fi afișat la

început de pagina și va avea optiunea 100% width, iar la ecran de browser mai mare de 1025
px meniul se va poziționa în stânga – pentru acest lucru vom insera 100% width pentru clasa
large-menu și 20% width & float:left pentru clasa large-menu pentru ecran cu peste 1025 px.
<div class="small-menu">
<form>
<select name="URL" onchange="window.location.href=this.form.
URL.options[this.form.URL.selectedIndex].value">
<option value="blog.html">My Blog</option>
<option value="home.html">My Home Page</option>
<option value="tutorials.html">My Tutorials</option>
</select>
<form>
</div>
<div class="large-menu">
<ul>
<li>
<a href="blog.html">My Blog</a>
</li>
<li>
<a href="home.html">My Home Page</a>
</li>
<li>
<a href="tutorials.html">My Tutorials</a>
</li>
</ul>
</div>
<div class="content">
<p>Loremipsum dolor sitamet, consecteturadipiscingelit…</p>
</div>

- stilul va fi de forma
<style>
@media screen and ( max-width: 800px ) {
.small-menu {
display: inline;
}
.large-menu {
display: none;
}
}
@media screen and ( min-width: 801px ) and ( max-width: 1024px ) {
.small-menu {
display: none;
}
.large-menu {
display:inline;
width: 100%;
}
.large-menu ul {
list-style-type: none;
}
.large-menu ul li {
display: inline;
 }
.content: {
width: 100%;
}
}
@media screen and ( min-width: 1025px ) {
.small-menu {
display: none;
}
.large-menu {
display: inline;
float: left;
width: 20%;
}
.content{
float: right;
width: 80%;
}
}
</style>

- rezultatul ar trebui să arate cam așa !

E. Creare responsive padding
- putem adăuga unei imagini resposive padding relativ deorece un padding static va face ca
imaginile să aibă margini foarte înguste în ferestrele de browser de dimesiuni mici
- calculare dimensiune (lățime) box model  dimensiune totală obiect total width = 2 x
(margin + border + padding) + content
- pentru o imagine de 200 px și padding de 8 px avem nevoie de 2 x ( 0 + 0 + 8 px) = 216 px,
procentul utilizat pentru padding va fi de 8/216 = 4%
- fișierul de stil va fi de forma
<style>
p.text {
float: left;
width: 60%;
}
div.img-wrap{
float: right;
margin: 0px;
width: 38%;
}
img.responsive {
max-width: 100%;
height: auto;
padding: 4%;
}
</style>
<p class="text">ipsum dolor sit amet, consecteturadi…</p>
<div class="img-wrap">
<img alt="robot image" class="responsive" src="robot.png">
<p>ipsum dolor sit amet, consecteturadipiscingelit…</p>
</div>
F. Responsive layout folosind proprietătile min-width si max-width
- cele 2 proprietăți sunt utilizate pentru a reduce informațiile de la 3 coloane la o singură
coloană când se micșorează fereastra de vizualizare (ecranul browser-ului)
- se definește o pagină HTML care include un element article care conține un header h1 și trei
elemente – prima e o imagine iar celelalte 2 text & fiecărui element i se asociază o clasă de
tip float (one, two, three)
<article>
<h1>Responsive Layout with min and max width</h1>

<div class="one float">

<img src="images/robot.png">
</div>

<div class ="two float">Pellentesqueeleifendfacilisisodio ac

ullamcorper. Nullamutenimutmassatinciduntluctus...
</div>

<div class="three float">Pellentesqueeleifendfacilisisodio ac

ullamcorper. Nullamutenimutmassatinciduntluctus. Utnullalibero, …
</div>
</article>

- se crează un fișier de stiluri pentru elementul .article care asociază elementului width: 100%,
max-width: 1280px și margini auto, titlul din h1 va fi centrat, elementul img va avea proprietățile
width: 100% și height: auto iar min-width:500px, iar pentru toate elementele fluide la clasa .float se
va adăuga proprietatea max-width:350 px.
<style>
article{
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
h1 {text-align:center;}
img {
width: 100%;
height: auto;
}
.one {
background-color: #333;
min-width: 500px;
}
.two {background-color:#666}
.three {background-color:#ccc}
.float {
max-width: 350px;
float: left;
text-align: justify;
}
</style>

- rezultatul ar fi de forma
 G. Controlare layout folosind padding relativ

- se crează o pagină stil blog care va cuprinde în body elementul .content (implementat utilizând un
<div>) iar în cadrul acestuia vom insera un paragraf de text și un element .comments care va fi utilizat
pentru a adăuga comentarii imbricate

- codul HTML este de forma

<div class="content">
<header>Control your layout with relative padding</header>
<p>
Pellent esque eleifend facilis isodio ac ullam corper. Null amuten
imut massat incident luctus. Utnull alibero, el eifend vel ultrices
at, volut patquis quam...</p>
<div class="comments">
<h2>Comments</h2> No 2 x h1
</div>
</div>

- în cadrul elementului .comments vom implementa cometarii si subcomentarii astfel:

<aside>
<h1>Comments</h1>
<div class="comment">
<p>
Pellent esque eleifend facilis isodio ac ullam corper. Null amuten
imut massat incident luctus. Utnull alibero, et...
</p>
<div class="comment">
<p>
Pellent esque eleifend facilis isodio ac ullam corper. Null amuteni
mut massat incident luctus. Ut null alibero, el eifend vel ultrices
at, volut patquis quam...
</p>
</div>
</div>
</aside>

-și putem continua cu adăugarea comentariilor

<aside>
<h1>Comments</h1>
<div class="comment">
<p>
Pellent esque el eifend facilis isodio ac ullam corper..
</p>
<div class="comment">
<p>
Null amuten imut massat incident luctus....
</p>
<div class="comment">
<p>
Ut null alibero, el eifend velul trices at, volut pat quis
quam...
</p>
</div>
</div>
</div>

<div class="comment">
<p>
Null ameget dui eros, et semper justo. Nun cut condi mentum
felis...
</p>
</div>
</div>
</aside>

- fișierul CSS are forma

.content {padding:0 5% 0 5%;}
aside {padding:0 10% 0 20%}
.comment {padding:0 0 0 10%}

- rezultatul ar fi de forma
H. Creare resposive layout folosind interogari media (media queries)
- acest lucru este util când se dorește utilizarea unei singure imagini care să aiba dimensiuni
diferite în cazul unui layout responsive
- se va crea un fișier HTML simplu care să conțină un titlu h1 și un element wrap care să
includă o imagine și un paragraf de text
- se vor crea interogări media pentru următoarele dimensiuni de browser - 960px, 1024px,
1280px, 1366px, 1440px si 1680p
- exemplu pentru interogările 960px și 1280px
@media screen and (max-width: 960px){
.wrap {padding:0 5%; width: 90%;}
.wrap img {
width: 90%;
height: auto;
padding:5%;
}
.wrap p {
width: 90%;
padding: 5%;
text-align: justify;
}
}
@media screen and (min-width: 961px) and (max-width: 1280px) {
.wrap {
padding: 0 5%;
width: 90%;
}
.wrap img {
width: 50%;
height: auto;
max-width: 600px;
float: right;
}
.wrap p {
width: 50%;
text-align: justify;
float: left;
}
}
@media screen and (min-width:1281px) {
.wrap {
padding: 0 5%;
width: 90%;
}
.wrap img {
width: 40%;
height: auto;
max-width: 500px;
float: left;
}
.wrap p {
width: 60%;
text-align: justify;
float: right;
}
}
I. Ascunderea unui element folosind media queries
- se va crea un fișier HTML simplu în care se vor include un header h1, o imagine și 2
elemente de tip text, fiecărui element fiindu-i asociat câte un background și width diferit
- se consideră pentru interogările media o valoare a breakpoint-ului de 960 px și se
implementeaza 2 versiuni de interogări
- prima interogare media se va implementa folosind max-width:960 px, postion:absolute și left:
5000 px pentru imagine (elementul img); prin acest stil imaginea se va deplasa foarte în
stânga ecranului și totul se modifică ca și cum imaginea ar dispărea. În interogare mai adaug
elementului .bar & stilul display:none, elementul rămâne pe loc dar devine invizibil. Astfel
aceste 2 elemente devin invizibile și pe pagină vor rămâne doar titlul și elementele din .foo
- a doua versiune de interogare media se va implementa prin includerea elementului .foo în
interogare stabilindu-se o margine stânga de 5000 px, acest lucru face ca imaginea sa dispară
din câmpul vizual și să lase un spațiu alb în locul elementului
- codul sursă ar fi de forma
.foo {
background-color: #ccc;
width: 300px;
}
.bar {
background-color: blue;
width: 600px;
color: white;
}
@media screen and (max-width: 960px) {
img {
position: absolute;
left: 5000px;
}
.bar {display: none;}
}
@media screen and (min-width: 961px) {
.foo {
float: left;
margin-left: -5000px;
}
}

- rezultatul ar trebui să fie următorul: