Responsive Design

Asked

Viewed 129 times

0

I have two questions here with responsive design.

The first is in relation to the code that follows:

 <link rel="stylesheet" media="only screen and(min=width: 1366px)"
href="css/deskmax.css"  />

because when I create CSS so it doesn’t open in the browser?

deskmax.css file

 @media screen and (min-width: 1366px) and (max-width: 1920px) {

 conteúdo css do site

}

I do everything else only works if I take the @media screen link code; I need to leave in css without @media or I can leave it anyway?

Second question with CSS in @media for responsive design is, create the css only within the @media querys or I have to create it all before, without the @media and then inside the @media to readjust?

css3 responsive-layout media-queries

2 answers

2


This site has a summary of what each property of Medias Querys means. http://tableless.com.br/introducao-sobre-media-queries/

But don’t worry too thereby.

Now, what comes first ? It depends on your development.

One of the most widely used practices today is Mobile First. That is, you start your CSS by programming to mobile devices and use medias querys to adjust your page for larger devices up to FULL HD.

Mobile First practice saves many lines of code.

  • Well I’m experiencing the responsive, I’m learning even more I started from the lowest resolution in case I put 768px, I just didn’t understand the pq does not emulate the code when I separate the two CSS link now when together it emulates right. Who taught me made a file for each CSS and placed inside the files the media and the link the condition to open that css ie media... OBG the link ta helping

  • Why Mobile First Would Save Lines of Code?

  • Saves more than making Full Mobile. Full Mobile you would work with screen max-width. You’d have to do all the style CSS to get where you want. With screen min-width you type little compared to screen max-width, starts from lower resolution to higher. It is better maintainability as well.

-1

I’m new here and I’m researching so you can use it as follows : 

< meta name="viewport" content="width=device-width, initial-scale=1">

put this on your INDEX page.

and in css this way to set the size of the pixels of each device knowing that each device has a certain size

@media(max-width:750px){

Browser other questions tagged css3 responsive-layout media-queries

You are not signed in. Login or sign up in order to post.