I require assistance in constructing a media query, which will allow me to target desktops/laptops. I'm using the table below as a reference for display sizes.
Listed sizes in the Display Size list correspond to the Optimal Canvas Width list.
Display Sizes (in pixels):
800x600
1024x768
1280x800
Optimal Canvas Width (in pixels):
width 780
width 960
width 1220
The table I'm using as a reference basically lists layout widths to use for each display size, but that is not what I'm confused about. What I don't understand is how to construct a media query for all styles within these widths.
This is what I have so far:
<link rel="stylesheet" href="file.css" media="only screen and (min-width: 780px) and (max-width: 1220px)">
All I want to know is if I'm doing this right. Hope I've explained this clearly enough! Thanks in advance!
Not sure about the 'only', but otherwise it looks fine. This will match screens between 780 and 1220px wide. You should add other queries for other sizes to include different files for those sizes.
Remember not to specify a min-width for the smallest, and no max-width for the largest, otherwise you won't have any (specific) styling on very small or very large screens.
Note that you can test your media queries quite easily. Just resize your browser window.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have the following queries on my WordPress theme, and they are alot ;/
I am new to WordPress so i can't understand them correctly, but i am sure i will understand your explanation .
here is what I don't understand.
1: I don't understand for which screen's they are.
2: I don't understand what the "max" ( this one is very strange )
3: will the max width terminate the setting or something ? because we have min 600 and max 600
here is the code.
1) screen here means the screen of the device itself (not a print as print is the common one). But this has same effect as
#media (min-width: 312px)
Just you are specifying that you want the max-width of the screen on that the website loaded, that's it
2) the max means the maximum width of the device screen to which the following styles are applied.
for eg:
#media screen and (max-width: 768px){
//These styles will apply only if the screen size is less than or equal to 768px
}
3) There is no termination. If you have max and min with 600px, then the styles will applied as per the position of the code. The code that comes below will apply (if min code is at line number 10 and max code at line number 20 then max will work)
Screens are not printed on paper or read out through a speaker. They are screens like the ones on a smartphone, laptop or monitor, and the rules apply to all of them (which also meet the and condition).
Max is a standard English term. The rules apply unless the width is more than the maximum defined. It won't terminate anything, the rules inside it just apply when the condition is met.
because we have min 600 and max 600
… with different sets of rules. Some apply when the width is at least 600px and some apply when it is no more than 600px.
With mediaqueries you can determine on which resolution your styling will be applied max means if the screen size is bigger than your number the styling in the media query will not be applied. Same with min if screen size is lower than your number styling will not be applied. Screen means that you styling will be applied when the medium has a screen for example you could write print than the styling will only be applied if you print your website.
A media queries detect media type which are currently using your
website in this case is screen so any device - you can also put
specific css for print - to make your website be print friendly.
Using Media Queries are core of RWD - responsive web design.
min-width its saying browser 'please use this block of css rules if viewport of your browser is min 312px so basicly every device
which has viewport size bigger than 312px.
max-width its saying please do this block of css rules if viewport of device is bigger than 456px - so all devices which has
455px and less will not run this css rules.
There is also state like #media screen and (min-width: 200px) and (max-width: 1000px) {} - its targeting devices which has more than 201px and less than 999px of viewport size.
Links:
https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
The media-queries are basically a simple if statement on other programming languages.
screen: The screen is used to define the rules only for computer screens, tablets or smartphones. There are other media-types like projection or print.
max-width: specifies the maximum width of the screen (or media) for the CSS rules. All rules in this part are for screens lower and equals the value.
min-width: specifies the minimum width of the screen (or media) for the CSS rules. All rules in this part are for screens larger than the value.
Example #1 (using min-width):
#media screen and (min-width: 456px) { ... }
The CSS rules in this part are only used for computer screens, tablets or smartphones with a minimum screen width of 456 pixel.
Example #2 (using max-width):
#media screen and (max-width: 456px) { ... }
The CSS rules in this part are only used for computer screens, tablets or smartphones with a maximum screen width of 456 pixel.
CSS3 Media Queries: https://www.w3.org/TR/css3-mediaqueries/
Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.
Hopefully this guide will help you understand how this works: Link
You should also check out this guide to the different screen sizes:
Link
I was wandering if in 2016 is the correct time and place to use css3 vw & vh units for creating responsive sites, from my experience this is the easiest way to make it happen... but i have not seen almost nowhere using this technic. Why is that so? And if you have better way doing responsive sites pleas share...
VH and VW are relative to the height / width of the viewport, so they are ideal for scaling elements based on the viewport size.
For example if you want a 2 column layout, specifying the width of each column as being 50vw will work well. According to Can I Use browser support is good if you don't need to use vmax.
Scaling is one aspect of responsive design, another is changing the page layout.
As correctly noted by George Chanturia below, the following comments refer to adaptive design, not responsive design.
Say you wanted your 2 column layout to collapse to a single column on smartphones you'll probably want to use media queries and pixels or rems or ems
eg
#media only screen and (max-width: 25em) {
...
}
or
#media only screen and (max-width: 400px) {
...
}
For sure you could use VM and VW inside those media queries but it's not a feature you can test for in the actual media query.
Hope this helps.
I'm using a CSS Media Query to adjust the look of my page if it is very narrow. In my simplified example, if the page is less than 300px wide, I'll make the background blue.
#media all and (max-width: 300px) {
body{ background-color:blue;}
}
I recently discovered that if the user zooms (Ctrl+Scrollwheel or on Chrome Wrench>Zoom) that the max-width will still kick in at 300 actual pixels, not 300 zoomed pixels. This can break sites with more sophisticated layouts. Is there any way for the max-width media query to handle users with zoomed browsers?
I've experimented around and it seems that you can use media queries for a zoom, however in a Webkit browser you must define the viewport.
I am building a site,that need to be scaled according to the browser size.Basically 2 rows of 3 columns. Left and right columns have picture and middle column have text in it.I gave percent to the left and right and they are doing well,but how to give text in the middle column same treatment so the it changes its size according to the browser size?
Depending on the browser, if you are targeting modern browsers that allow CSS3, you can use the css media queries:
<link href="grid-978.css" media="all and (min-width: 1002px) and (max-width: 1247px)" rel="stylesheet">
This code loads the selected css only for that interval of screeen sizes.
You can see an example here: http://978.gs/
Then what you could do is adapt the different content to the viewport you are dispaying (this means the effective screen size that has your page to show, including scrollbar).
Just spent several hours writing up for a new site... looks great in my resolution, 1366x768... However, even going down to 1024x768 means that not everything fits inside the screen width!!
Tried:
<style type='text/css'>
body {width:100%;}
</style>
This does have some effect on my resolution but no effect on smaller resolutions...
How can I make sure my webpage will fit 100% in all screen resolutions?
I use CSS #media directive, unfortunately, not supported by IE8-. Compliant CSS3 allow you to style differently according to the width of the viewport:
<style type="text/css">
#media screen and (min-width:1px) and (max-width:1365px) {
...
}
#media screen and (min-width:1366px) {
...
}
</style>
By the way, you have an error in your CSS, you forgot to specify the unit:
body {width:100%;}
One thing you might be interested in are CSS Media Queries. They aren't supported in every browser, IE for example only supports it as of the version 9 preview, but they can help with resizing windows as well as smaller resolutions, because you can apply different CSS rules to each screen size.
Apart from that, make sure that your layout isn't "rigid", i.e. don't treat divs like tables. Make their width based on a percentage of the parent, or use floating to get them to line up correctly. It is acceptable to have a "minimum width" of your site -- usually 800 or 1024 -- accepting that users on ancient resolutions like 640x480 will just have to scroll.
You will likely need to go back to the drawing board with your CSS and design it to readjust itself, and/or have a minimum width.
Unless you want to do all size measurements in percentages, I don't think you can. And even then, you'll have a problem if someone uses a resolution in a different aspect ratio or a really low resolution, because in the first case your page will be stretched or squished and in the second you could have layout issues.
Your CSS for the body tag look OK. But if e.g. all of the DIVs in your body have a fixed size, they will never fill out the whole width. Can you post an example of your page?
People tend to make websites 960px wide.
It is easy to split into even sized columns, as it is divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16, plus it fits nicely into the smallest (worthwhile) resolution of 1024px.
You can of course use fluid layouts, or various methods of detecting screen resolution, but if you are using a lot of imagery, it makes it a pita.
I would recommend you use a CSS framework. They build the foundations of your design so you don't have to worry about things like this.
My personal favourite is Blueprint as they take care of things such as typography and form styling not only the grid layout, which is what you're after.
960gs is another popular one which works in a very similar way to Blueprint. They also have a few tools to help you with customizing your development and is not as restricting as Blueprint.
They are the two I've used before, but I'm sure there are loads more.
Make layout stylesheets for the most common resolutions... let's say 800x600, 1024x767 and 1280x1024. Then load them with:
<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' />
You can read more at CSS-Tricks.