Public Forums 71,145 posts

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#188084

Hi

I’am bulding a website,that I want that works with smartphones,tablets and desktops.Wich ranges of resolutions shall I use with @queries for my website appear properly on these devices?

Must I have to add this resolutions ranges within the file variable.less?

Thanks a lot

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#495458

Hi,

<blockquote>Wich ranges of resolutions shall I use with @quer ies for my website appear properly on these devices?</blockquote>
You can find out the suitable @media queries for devices here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
But, by default, we defined these quieries for T3 blank template in templatest3_blanklessstyle-responsive.less .

<blockquote>Must I have to add this resolutions ranges within the file variable.less?</blockquote>
No. You just need to add the variables only which will be called in other .less files.
I.e: @T3gridWidth1200: 1200px; // T3 add

If you are not familiar with Less, you can add in css file instead.

Regards

1 user says Thank You to phong nam for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#495932

Many thanks for your answer.

I’am not familiarized with less files.I will add it to custom.css file

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#496202

I try it but it seems that I doesn’t work
For instance,I put this code to custom.css file
@media only screen
and (min-width : 1224px) {body {background-color:#AD1616;}
}

When I resize the window,it changes the backgound-color when the resolution is 1200px,not 1224px.
What’s happen?

Thanks a lot

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#496229

Hi,

<blockquote>When I resize the window,it changes the backgound-color when the resolution is 1200px,not 1224px.</blockquote>
Yes. That is why we call “Responsive”. You need to give css styles in several main @media screens.
Pls look back my suggested tutorial: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

1 user says Thank You to phong nam for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#496267

thanks for the reply.
I refer that the browser doesn’t obey @queries.If I put this
@media only screen
and (min-width : 1224px) {body {background-color:#AD1616;}
}

this propertie will be applied when the screnn is bigger or equal than 1224px,isn’t it?this is not true,and the browser aply the propertie at 1200px.

Anyway I will take a look again to the tutorial,and try again.

thanks you for your help

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#496278

Hi,

<blockquote>this propertie will be applied when the screnn is bigger or equal than 1224px,isn’t it?this is not true,and the browser aply the propertie at 1200px.</blockquote>
Yes. That is right.
I.e for screen is smaller or equal to 767px (table & mobile). The codes should be:

@media (max-width: 767px) {
body {
background-color:#AD1616;
/*or other css styles*/
}
}

1 user says Thank You to phong nam for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#496358

Thanks again for your reply.

I want to know why the browser aply the style that I put to @media (max-width: 767px),when I resize the window on my pc at a resolution of 780px

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#496394

Hi,

If you resize the window on PC to resolution 780px, the website will get styles you put in:

/* iPads (landscape) ----------- */ @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Your Styles */
}

* Keep in mind with these basic responsive queries & practise.
I think they are quitely easy to you !

1 user says Thank You to phong nam for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#496492

shall I put all this media queries?I want that web works well with computer,laptop,tablet and smartphones.Wich @querie shall I do first?

/* Smartphones (portrait and landscape) ———– */ @media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ———– */ @media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ———– */ @media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ———– */ @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ———– */ @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ———– */ @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ———– */ @media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ———– */ @media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ———– */ @media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#496625

Hi,

<blockquote>shall I put all this media queries?I want that web works well with computer,laptop,tablet and smartphones.Wich @quer ie shall I do first?</blockquote>
You can put any @quries first if you want.

1 user says Thank You to phong nam for this useful post

1. il_bujia

[Author]

Posts