I recently asked a question about resolution and how I can fix it in my ASP.NET web application.
With some of the answers I got I found that media queries was a good place to go.
I have set up my CSS document like the following:
#media only screen and (max-width: 640px) {
}
#media only screen and (min-width: 641px) and (max-width: 800px) {
}
#media only screen and (min-width: 801px) and (max-width: 1024px) {
}
#media only screen and (min-width: 1025px) {
}
I have been developing in 1600x800 and I am wondering how do I know what I need to change the sizes of the object to. Do I have to develop the application again in a smaller browser or is there an easier way to go.
HTML:
<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>
The approach is basically the same as when you are writing CSS without using media queries. You still have to deal with different window sizes.
Drag the window edge to make the browser smaller
Look at how the design holds up
Adjust the CSS
Refresh the page
You will need to change the sizes of your images and fonts and also change their positions based on the different screen sizes which you have set using the media queries. To check the different code you can resize your window and drag the border and see the effect if its working or not.
And also follow the steps which **#Quentin** has written it will help
this is not exactly the right approach to follow. you should start your website with a fluid css layout grid, google it a choose one that suits you. this is an example of a fluid grid: http://onepcssgrid.mattimling.com/.
When you set up everything and designed, stretch your browser and when the design "breaks", add a media query breakpoint. deciding your breakpoints before the development is not a good idea.
a good tool to test your design may be: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random (enter your url in the top left box) but i usually prefer stretching my browser manually.
This is what I have done in my website and it is working fine:
<head>
<meta name="viewport" content="width=device-width">
<style>
#media screen and (max-width:1900px)
{
#content{
margin-left:251px;
margin-top: -197px;
}
}
#media screen and (min-width: 420px) and (max-width: 1000px) {
#sidebar {
margin-left: -30px;
}
#content{
margin-left:221px;
margin-top: -197px;
}
#separator
{
height: 50px;
}
}
</style>
</head>
I checked it by resizing my chrome window and then applied width accordingly. Hope it can help you.
CSS Media query are the best option to solve issue related to working with different size of browser and devices. you can check your application with different tools available that shows how your application look on different device and browser.
You can check by re-sizing your browser window or you can use browser extension to check your work
Google Chrome:
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
FireFox:
https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
Opera:
https://addons.opera.com/en/extensions/details/responsive-web-design-tester/?display=en
Safari:
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html
To learn more about css media queries visit: http://letsdopractice.com/css-media-queries/
Related
Is it a good idea to use CSS' zoom property for responsiveness instead of manually resizing every element on the webpage in certain screen sizes? This will obviously not work on mobile because it's a whole different layout but it would work for smaller desktop screens. Are there any drawbacks to this (other than Firefox lacking support for the zoom property)?
For example -
#media (min-width: 1024px) and (max-width: 1279px) {
body {
zoom: 80%;
}
}
Thanks a lot for your time, have a nice day! ✌️
I think, it bad idea, because this property do not supported in all browser
Using fullpage.js, I created a 'slides' page that looks great in a browser, but on an iphone it will not scale the text to fit the screen (and it's not zoomable either).
It ends up looking like this
In the css file, I have the font set at 1.2em, is there a way to make this text scale up to a more readable size on the iphone?
If you'd like to view on your phone:
link to example
Thanks SO
For every resolution you can set different css meaning. For example
#media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
It means if the resolution is not more than 300 it will use a different background for body. If you dont want to have everything in the same same css then you can link like this:
<link rel="stylesheet" type="text/css" href="tablets.css" media="screen and (min-width: 600px) and (max-width: 800px)">
You could try CSS3 "vw". It supports new dimensions that are relative to view port.
div
{
font-size: 3.2vw;
}
use media queries to resize anything really making your website completely responsive
I have this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have this CSS:
#media (max-width: 1100px) and (max-device-width: 1100px) {
.wrapper {
width: 200px;
}
.page {
width: 100%;
}
I have also tried the following css rules:
#media (max-width: 1100px) and (max-device-width: 1100px) {
and
#media only screen and (max-width : 767px) { .wrapper { width: 100%; } }
and
#media only screen and (min-width: 1024px) and (max-width: 1280px)
and
#media only screen and (min-width: 993px) and (max-width: 1024px)
None of these CSS rules work.
Its all being totally ignored on an iPhone.
But it works fine in a browser resized to iphone size.
Have a look for yourselves:
http://www.moonshineandfuggles.com/
Ive extended the max-width to ridiculous values to try and include iPhones.
I dont want the .wrapper to be 200px, I want it to be 100% and for it to take into account the width of the device.
It seems like the iPhone thinks it should make this page about 700ish pixels wide.
How can I make the iPhone realize I have made this site responsive so it adjusts to the correct size?
The following has some information you might find useful of media queries -
What is the difference between "screen" and "only screen" in media queries?
My first recommendation is that you design the flow of your CSS to work from your smallest supported resolution outwards, such as designing your CSS file to support mobile devices and then using media queries to deal with changing the properties in your CSS file to support larger resolution windows / devices.
The following link explains the benefits of this more clearly than I am ever likely to - http://unmatchedstyle.com/news/working-with-media-queries-and-min-width.php.
Using this design approach makes it easier to deal with questions of specificity, which can occur when you try to use a media query to override an already defined property. One handy way of avoiding such conflicts I obtained from Media Query Styles Not Overriding Original Styles - note Adrift's usage of body.
You do not need to use media queries to override a property if you are not going to actually change it - e.g. you do not need to specify the width of wrapper in your media queries since it has already been defined in the main body of your CSS file.
As for your problems regarding width, try setting the width of body (or, failing that, wrapper) to 100vw if you are having trouble with 100%.
I hope that the above is not too confusing.
If you have any questions, then please feel free to reply.
I want to add some style for the screen size between 1024px to 1280px, so I'm using following media query:
#media only screen and (min-width: 1024px) and (max-width: 1279px) {
My screen size is 1280px. The Firefox does not display any style added in the above query (and that's correct), but the Chrome browse on 1280px screen size displays the style added in the above media query.
Why Chrome on 1280px screen still displays the style added in the above media query? How can I fix the above query for Chrome too?
Thanks.
That is 6 years old but maybe help someone:
I was with this same problem, media queries working fine in edge and firefox but not in chrome.
The problem, in my case at least, was that I not put the viewport tag in head/html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now why the site was working in firefox/edge I don't know, actually make it harder to find the issue...
I'm really not sure why you're experience problems with your media query. Perhaps you're not styling it properly.
Obligatory JSFiddle here
body { background: red; }
#media only screen and (min-width: 1024px) and (max-width: 1279px) {
body { background: blue; }
}
I've tested it with Google Chrome on three different types of screen:
1. A width of less than 1024px
2. A width between the specified 1024px and 1279px
3. A width of more than 1279px
How can I scale web page to look nice on mobile devices?
On page I have iframe. Iframe contains html5/javascript game that uses fixed position divs. I want to scale that iframe as well.
Thank you very much.
EDIT:
I know I wrote this a LONG time ago, but here is the best solution for modern browsers: CSS Media Queries.
A little bit like the HTML option bellow, CSS Medial Queries are a native approach to responsively reflow any elements depending on the browser size.
I usually base myself on a standard 980px website, and adapt it from there using these media queries:
#media (min-width: 1920px) {
// Your CSS here
}
#media (min-width: 1280px) {
// Your CSS here
}
#media (min-width: 768px) {
// Your CSS here
}
#media (min-width: 0px) {
// Your CSS here
}
The order is important as the browser will cascade down from the highest min-width to the one it needs.
There are great examples from Chris Coyer from CSS-Tricks.com here:
http://css-tricks.com/css-media-queries/
ORIGINAL POST:
You could simply use conditional CSS to give it a specific look for every screen size. There are a few way you could do it: With Javascript or with HTML (which is faster).
HTML: This example would use a certain CSS (iPad_Portrait.css in this case) when the device has higher resolution than 481px but lower than 1024px. It works great with iOS devices, even with the iPhone 4 and 4S with super high resolution displays. But does not work at all with android's high resolution displays.
<link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="iPad_Portrait.css" type="text/css">
JavaScript: This example involves browser detection which is not always reliable, but I have had pretty good results with the following code:
<script type="text/javascript">
$(document).ready(function()
{
if((/iphone|ipod/i.test(navigator.userAgent.toLowerCase())))
{
// DYNAMICALLY CHANGED THE CSS FILE FOR THE IPHONE SPECIFIC CSS.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
}
else if ((/ipad/i.test(navigator.userAgent.toLowerCase())))
{
// DYNAMICALLY CHANGED THE CSS FILE FOR THE IPAD SPECIFIC CSS.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
}
else if ((/android/i.test(navigator.userAgent.toLowerCase())))
{
// DYNAMICALLY CHANGED THE CSS FILE FOR THE ANDROID SPECIFIC CSS.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
}
else if ((/blackberry/i.test(navigator.userAgent.toLowerCase())))
{
// DYNAMICALLY CHANGED THE CSS FILE FOR THE BLACKBERRY SPECIFIC CSS.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
}
else
// IF NO MOBILE BROWSER DETECTED, MOST LIKELY IS A COMPUTER, THEN IT DEFAULTS TO THIS FILE.
$('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
});
}
<script>
If you put that code in your head, it will choose the appropriate css file for each of the device types.