This question already has answers here:
Max-Width vs. Min-Width
(7 answers)
Closed 10 months ago.
I used the #media (min-width:320px) and noticed my design from mobile scaling back to desktop had inherited my mobile design. changed to max-width and my desktop design was restored but only this time my mobile design is all messed up again like it was before I made all of my adjustments using the #media (min-width:320px)
what am I doing wrong?
I think you need to read more and understand better these 3 things to find out what you need. Media queries are a popular technique for delivering a tailored style sheet to different devices (from: https://www.w3schools.com/css/css3_mediaqueries_ex.asp).
max-width
The max-width property defines the maximum width of an element.
If the content is larger than the maximum width, it will automatically change the height of the element.
If the content is smaller than the maximum width, the max-width property has no effect.
Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.
Further read: https://www.w3schools.com/cssref/pr_dim_max-width.asp
min-width
The min-width property defines the minimum width of an element.
If the content is smaller than the minimum width, the minimum width will be applied.
If the content is larger than the minimum width, the min-width property has no effect.
Note: This prevents the value of the width property from becoming smaller than the min-width.
Further read: https://www.w3schools.com/cssref/pr_dim_min-width.asp
Best Practice
Of course by changing min-width to max-width in media queries, or vice versa. It would change the layout it should be. We need to be more persistent on what we need the media query to handle the style. We should decide, only use min-width, or only use max-width. Don't use both or the frontend developer will be going insane on something hard to solve when the frontend styling bug comes.
Useful Link(s)
Max-Width vs. Min-Width
Related
I'm finally learning responsive design and I need to know the best practices for em and percentage units of measurement. If I were to set the font-size of the body to be 10px, would I run into problems down the line declaring all font-sizes em's (1em = 10px, 2.5em = 25px, etc.)?
Also, when is the correct time to use em units vs percentages? Are em units mainly for typography, and then percentages would be used for sizing, margin, padding, etc.?
I love the idea that I can scale font-size proportionally at media queries by changing the body font-size, but I don't think I would want my layout and spacing to shift based on the size of text (or do I?).
It is best practice to allow the browser's font size setting to affect your design–avoid setting the font-size of the body in pixels.
rem units are great for ensuring that everything scales proportionally to the browser font-size. em units are calculated based on the font-size of the parent element so they can become trickier to use when elements are nested. rem is always relative to the font-size of the html element (the root element). If you assume 1rem = 16px and build everything relative to that, then even if the user has set the browser so that 1rem = 20px, for example, then the entire design will scale up accordingly.
With responsive design, it is best practice to define media query "breakpoints" at screen widths where the content starts to become unusable (rather than at arbitrary widths based on popular devices). When your whole site is scaled up or down by the browser's font-size change, you will want the break points to also respect that font-size. However, since Safari treats rem media queries differently than other browsers, it is best to use em for media queries.
ok, first if you want using responsive design, i suggest strongly to you to use a framework like bootstrap or fondation to have a responsive design. You seem newbie in that way and responsivity is a bunch of css and preprocessor for most complicate cases.
But, to answer to your question, we dont resize fonts in media queries for most cases. Set per exemple your fonts in rem. So you must test on many devices your responsivity. By layout you must probably mean divs. Best practice is viweport vw (width) and vh (height) except if you want a proportionnal measure inside annother element. In that case, use %. Rem is better than em cause it is root em. The true size of a font difined in html. When the screen become too small on a device, you must collapsing your menu, and the text on your site must goes down in a div. I can continue like this a while, but like i said, use a framework, faster learning and faster development. Most devs like me use frameworks for their clients.
On one of my sites I use ZURB foundation for layouting as it really helpful to make the website responsive, however, I need to set to set an absolutely minimum width to be 700px. Meaning that the browser should not do any scaling after the screen is smaller than 700px.
What is the correct way to do it?
Any help or guidance is much appreciated.
For small screen sizes, Foundation uses a max-width of 40em, which is equivalent to 640px. In the Foundation css file, you'll need to find all instances of media queries that define a max-width of 40em, and change the value to 43.75em, which translates to 700px. To maintain consistency, I would suggest sticking to using em.
The "medium" media queries kick in when the window width is greater than or equal to 40.0625em (641px), so you'll have to change these to 43.813em (701px).
Here's an interesting article that explains why Foundation uses em and why it's a good idea to use it in general: Zurb em use
Another website that allows you to convert em to px and vice-versa: px to em conversion
I'm not an expert on CSS but based on what I've read, this is how min-width and min-height work in media queries.
Min width is the current width based on the current orientation of the device. Say, for instance, I had a device supporting 320x480 resolution, in portrait mode the width would be 320 and the height 480 - and in landscape mode the width would be 480 and the height 320.
I'm trying to find out if the same applies to device width and height - or whether is it fixed in relation to the device. In other words, if the device height in portait mode is 480, and I flip the phone the device height is still 480.
The reason, I'm considering using device parameters for some media queries instead of standard min/max is because the position can change if the keyboard is opened - so I'm looking for a permanent height as opposed to the fluctuating height of the viewport.
I'm struggling to find this answer and would appreciate any advice - also would like to know if there are any anomalies when using these queries.
Yes, max-width behaved the same as min-width. When you rotate the device you will get a new max-width.
So your max-width will be larger in landscape than in portrate.
The same logic applies to max-height.
From what I understand I should set a meta tag in the header as mentioned below, use min-width(or min-device-width?) values in media queries building up from the smallest supported size and adding additional CSS via the queries for larger sizes, anything specific to the smallest size only could be defined in a max-width query.
I should also use column classes in my html provided from a grid framework which will apply % width values to my elements/components based on the value of the column class in use(media queries can change this). I'm planning on using Susy with Breakpoint (Sass libs), I'm not sure if Flexbox is a better option.
Choices aside the fluid approach with breakpoints via media queries to alter the layout for smaller screens(or browser windows) is what I'm trying to pickup, though some resources I've been pointed to seem a bit outdated or varying advice/opinions. Please confirm if so far what I've said is fine or if I've misunderstood anything.
1) With the meta tag mentioned, do PX values translate to a consistent physical size(regardless of pixel density) across screens? And is the width property being set the same property width property that Media Queries can also reference?(So it'd now be equal to device-width, or the original value is still referenced?)
2) With regards to being responsive, should I be using PX units? It seems to be suggested and used in many articles these days that I come across, though older ones a few years back were pushing EM/REM units. I've read that fonts defined with PX units don't change if a user adjusts the browsers default font size, but fonts with %/EM/REM sizes do....however EM units can be problematic due to the relative nature if you have parent elements also sized with EM units? REM I don't know too much about yet, other than it wasn't as well supported and should have a PX fallback.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).
Source
Is it possible using CSS3 media queries to ask:
'is the height of the viewport larger than the width'?
or:
'is the width of the viewport larger than the height'?
I would like my images to be fluid in both directions!
Thanks.
For this you might use the following media queries:
orientation:portrait
orientation:landscape
I cannot give you more information on the media queries, as I haven't researched them yet. Do make sure they are supported by the devices you wish to support.
As for CSS: no, you cannot detect the width and height of your viewport using CSS. CSS is not a programming language, but a styling language. Unless you're using a CSS preprocessor (Sass, Less), you won't be able to do anything intelligent with it.
Mr. Alien may be right on some technicality, because I'm not a programmer. However, if you want to redesign your layout or make adjustments based on wether the screen is in landscape (width is larger than height) or portrait (height is larger than width) mode, you can definitely use css media queries.
http://www.w3.org/TR/css3-mediaqueries/#media0