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
Related
My media queries work for all sizes I have specified when I use the responsive design mode in my browser. These same media queries will not work when I open my web App on a different device. For example, the height I have set for one of my div is: 197px for screen max-height: 700px and 290px for screen max-width: 1382px. When I use responsive web design, the media queries for both sizes work fine. When I resize my browser or open the same web App in my mobile (max-height below 700px), the media query is still rendering for screen width of 1382px.
Similarly media queries do not work when I resize my browser (on my laptop) instead of using responsive design mode.
What I understand is that media queries work on browser window size instead of the device's viewport size. I have tried using both media all and ```media screen```` and neither is helping resolve this issue. So, how do I write media queries to support browser window sizes?
Any help?
Thanks in advance
Two ways to solve the issue:
The not so practical way of adding a large number of breakpoints (for both max/min heights and widths). The problem that may arise is the ordering of media queries will get messed up, breaking the layout.
Using flexbox/grid at every level of your code. Even a floating menu or any other floating component should be put under a flexbox structure. In which case, you will have to write just the bare minimum number of media queries and the flexbox properties will take care of keeping your layout clean.
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
Normally when I am creating a responsive site, I do the normal thing of setting a viewport to the device width, and creating different layouts for different screen resolutions.
But I'm doing a few tweaks to an old site that has big chunky buttons, default font sizes and a simple layout, and actually it looks quite usable when viewed as a desktop-style fixed-width layout, even on small mobile devices.
Rather than specifying a viewport and completely rewriting all the css to make a series of mobile-friendly versions, I'd really like to just increase the main body element font size a little more for viewing on a screen that is physically small: for this particular layout, this would be very usable - if I could work out how to do it!
Is this what -webkit-text-size-adjust: is for? It seems like it should be an easy thing to tweak, but all my googling turns up full responsive design approaches, which are overkill for this particular small task.
A way to make it is to detect the screen width with javascript using the window.screen.width property, and then apply the styles that you want from there.
Here's an example using jquery, however the same can be achieved with native javascript if you don't want to use a library http://jsfiddle.net/UXV7Z/
You can apply as many filters in resolution as you need, just like you would using media queries
DONT use javascript for such a simple task to accomplish with modern CSS, just use:
font-size: calc(80px - 3vw);
and adjust the values accordingly. That will icrease the size on smaller devices and decrease it on wider devices, which makes sense for buttons and footers and what not, but if you want to decrease the size on smaller width screens for text like large titles that overflow just use:
font-size: calc(25px + 0.35vw);
Once again adjust the values to fit your needs. And see here to view the browser support for the CSS calc() function. All modern updated browsers support it
i want to create a flexible layout, but I have one div which has to have a fixed width of 1000px. the best solution i had was to center the div while there was enough space available but when the screen became 1000px or smaller in width, the div would float:left. I'm aware that I could do this using media queries, but im already using those for different dimensions right now and wanted to explore other options. Does anybody have any suggestions?
You're pretty much left with media queries or using some JavaScript. Media queries are really the best approach for this due to performance and their declarative nature.
You should make it responsive and that would be with media queries or in your css, you should set the size in percentage for it to adapt with the user interface size. Simply make it responsive
I am aware of the CSS 3 units vw, vh and vm, which seem to be useful for making elements that have their box sizes and text sizes relative to the browser's viewport size. However, sadly, these are not well-supported with the current major browsers; only Internet Explorer 9+ does.
What other methods can I use to do things like CSS font-size properties that scale with the viewport? I would like to avoid JavaScript and/or jQuery solutions if possible.
Doing a 100% scalable website is possible. As Rev said, you can do this by using percentage values, but it is tricky.
The better option is to utilize #media queries. These allow you to apply CSS rules to a page only under certain conditions. By using media queries to detect the device width and/or the page width, you can apply fine tune control over how your site looks AT different viewport sizes. For instance:
#media screen and (max-device-width: 960px) {
font-size:14px;
}
#media screen and (max-device-width: 480px) {
font-size:13px;
}
Now, the above example is rather trivial and contrived. For a deeper understanding of what you can accomplish with media queries, I recommend you view the W3C spec page. Some of the most powerful are the width, min-device-width, max-device-width, portrait|landscape, and print queries.
As a side note, make sure to include these styles at the bottom of your CSS, so that they dont get overwritten by default styles.