I know how to use #media to target specific devices based on max-width, like so
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
But is there a quick way to do it based on device, like so
#media screen and (min-width: small) {
body {
background-color: lightgreen;
}
}
#media screen and (min-width: medium) {
body {
background-color: black;
}
}
Yes there is, using a CSS preprocessor, such as Sass, you can do:
$small: 480px;
$medium: 720px;
#media screen and (min-width: $small) {
body {
background-color: lightgreen;
}
}
#media screen and (min-width: $medium) {
body {
background-color: black;
}
}
I saw your question about media queries and I used to think of the same question. However, in my opinion, both fubar and Raptor are correct in their answers.
That said, I would like to point out one method of using media queries that I personally feel may be one of the more versatile methods.
I personally believe that using Google Chrome's developer tools and slowly shrinking the screen size to see when certain aspects of your website either looks awkward, or just plain breaks, taking note of those screen sizes and then writing media queries at those breakpoints may be the best way to have your site look good on the widest variety of screen sizes.
From my own personal experience, once I start concentrating too much on specific device sizes, particularly when it comes to dealing with the different screen sizes of Android vs Apple products, I inevitably had to go down entire product lines to nail the different classes of screen sizes. That makes for code that can become convoluted in a hurry!
I know this answer doesn't have specific code and can be considered more of an opinion than Dev Bible fact, but I strongly feel that the method I described is the one that (especially if you are not too experienced and are not aware of the various classes of mobile device screen sizes/resolutions out there) will yield the most versatile results.
I hope that helps puk. And if you or anybody feels differently or would like to provide a contrary opinion, please feel free to present it. I do not claim to know everything and am always eager to learn new things, methods and points of view!
Related
I'm really new in coding and I created my first page ever with html and css. The thing is, I'm struggling with making the page responsive.
I know that I have to add the #media query and that, but, once I add it, I don't know which parametres should I change (text, etc) and I can't see how the result would be since I'm using a computer.
I would like a clear explanation or some examples because I've been looking up on Internet and I'm still very confused.
https://codepen.io/jomby/pen/NWvVNpQ
NW vVN p Q
This is the link to my page. In this case, when I see the page on the phone, the text stretches a lot and also the gallery.
Maybe you could tell me how would you make this example responsive so that I can learn that way.
Thank you very much in advance, for your time and patience!
The way you work with Media Queries is by:
Decide what to do first, mobile or desktop
After you do it, start by coding your webpage and once you finish you start adjusting your screensize and see what elements get misconfigured.
Here are some patterns you can follow, however you're not enclosed to configure your settings in these sizes:
#media only screen and (max-width: 1200px){
/*Tablets [601px -> 1200px]*/
}
#media only screen and (max-width: 600px){
/*Big smartphones [426px -> 600px]*/
}
#media only screen and (max-width: 425px){
/*Small smartphones [325px -> 425px]*/
}
I am relatively new to web development I already have built some websites and currently I am tackling a large project. I am creating a website for my MC-Server.
For that, I am working with media queries to ensure that the website looks good on all sorts of devices.
BUT: I figured out, that there are two major kinds of media-query.
Examples for what I mean:
#media screen and (min-width: 1921px) {...}
#media (-webkit-min-device-pixel-ratio: 1.25) {...}
(I know that this isn't a standard yet)
I am having trouble using these. On 1080p monitors with 1.75, I need e.g. another positioning than on 1440p 1.75 monitors, etc.
Question #1: can I combine two media queries? E.g. the display must be 1080p AND 1.75 scale to use this query.
Question #2: what is the order in which the queries are processed? Resolution or scale first?
You can combine media queries with a comma, like so:
#media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) {
...
}
In terms of precedence, styles that are declared later will be used, unless the styles inside the media query have different specificity levels, or a !important marker is used
You can use the following operators for media queries:
, is interpreted as the delimiter in a list of single media queries which are ORed. So each media query between the commas is first evaluated, then they are ORed together. This gives the comma / OR the lowest precedence.
not always applies to a whole media query, without extending over a comma. This gives NOT the second lowest precendence after the
comma / OR.
not and only are mutually exclusive and have the same precedence.
and has the highest precedence
() parentheses are only used around media features and their values, i.e. (color) or (min-width: 320px). They may NOT be used to change precedence by grouping expressions.
Source1
Source2
You're already using a boolean in your first example.
#media and (condition) and (condition) not (!condition) { ... }
The comma others have mentioned relates to an OR. It works the same way as stacking a bunch of classes:
.myclass1, myclass2, div, p {
color: red;
}
This means that ANY of the above would match and the text inside them would be red.
If you want to override or force precedence you simply put another declaration later:
#media only screen and (max-width: 1000px) {
p{
color: red;
}
}
#media only screen and (max-width: 500px) {
p{
color: blue;
}
}
In that instance, Paragraph tags would be blue until the rendered width is larger than 500px and then turn red up to 1000px wide. The reason that the <p> isn't always red is that the second rule overrides the previous one based on the order it was written.
For 99% of the responsive cases, you won't need to worry about any rules other than width and possibly ppi. However, I should note that a Media query is the exact same structure as #supports and can be used to target browsers like IE that are misbehaving. In those cases, you would test against some very specific attributes.
Example: This would target IE 10 +
#media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {...}
Posted this over on Code Review initially because I was hoping to get some feedback on my CSS generally--which feels bloated to me--and I was told it belonged on Stack Overflow because I have a problem with nonfunctional code.
I've recently spent 9 hours building a site, my first time touching code in a few years, and even then I was never much good with it. I worked with a mobile-first approach in mind, but after building the basic site, I tried to implement media queries to get the site working well on larger screens and . . . well, my media queries flat-out have NO effect. As far as I can see from examples, I've formatted them correctly, but they produce no results at all.
This is a jsfiddle that contains the relevant content.
http://jsfiddle.net/LuGXP/
And the media query in question . . .
#media (min-width:480 px) and (max-width:960 px) {
body {
background:red;
}
}
Right now, I have it set to the very simple (and would-be eye-searing) change there just to test that it's responding to the media query at all. My actual goal would be to have the layout go from single-column at mobile device widths to dual column, then entirely horizontal, with a slight font-size increase at larger sizes.
Caveats:
1) I realize the code is likely very bloated. I want to address that at some point, but I figure it makes more sense to handle an actual pure functionality issue first and then take it back to Code Review.
2) There are some lines of CSS that probably don't make much sense with the index page. These pertain to the other linked pages, which share similar layouts.
If any more information would be useful, let me know.
Looks like a typo: http://jsfiddle.net/LuGXP/2/
BAD
#media (min-width:480 px) and (max-width:960 px) {
GOOD
#media (min-width:480px) and (max-width:960px) {
There shouldn't be a space between the value (480) and the unit (px).
It's usually good to work with the minimum code when trying to troubleshoot a problem. In your case, most of the code in your example is unneeded.
To that point, here's a stripped down example: http://jsfiddle.net/LuGXP/3/. As you might guess, this will turn the background red when the body is between 480 and 960x wide.
body{
background: green;
}
#media (min-width:480px) and (max-width:960px) {
body {
background:red;
}
}
is there a special html/javascript code that I can use? So I basically have a non mobile optimised website. I want to show a simple one line message to users browsing my website using mobile devices. The message should only show to mobile users.
Your help is greatly appreciated! :)
Thanks
You should look into media queries for CSS. Basically, you can specify a max/min width, then make a class that is only visible on those widths.
For example:
.mobileView {
display: none;
}
#media (max-width: 767px) {
.mobileView {
/* CSS here */
}
}
Please note that you can adjust the width as needed. Here is a quick source to get you started.
I have a VERY simply html form (an image with some text & select fields) which I would like to change to be available also for mobile devices.
What's the SIMPLEST solution for accomplishing this task ?
I found many explanations on the web, but they are all much too complex for my needs... Basically I just want to have the width of the form adjustable according to device, nothing more :)
Any reference to a SIMPLE tutorial that explains how to do the most basic adjustments for mobile ?
You could use CSS3 Media Queries to build a Responsive Layout.
For instance:
#media (max-width: 767px) {
.yourFormClass {
/* Some rules */
}
}
#media (min-width: 768px) and (max-width: 979px) {
.yourFormClass {
/* Some rules */
}
}
/* other resolutions... */
I suggest you to read these articles:
How To Use CSS3 Media Queries To Create a Mobile Version of Your
Website;
CSS media queries by Mozilla Dev.