I have recently started learning how to use CSS media queries to develop websites that are responsive / mobile friendly however, I am not familiar with the best practices associated with determining which width ranges to develop designs for.
For example, I normally use three sets of CSS rules. One for a small width (mobile) , one for a medium width (tablet or small laptop screen) and one for a large width (desktop).
This is what it looks like in code:
#media screen and (min-width: 1495px) {
//CSS RULES HERE
}
#media screen and (max-width: 1494px) and (min-width: 1245px) {
//CSS RULES HERE
}
#media screen and (max-width: 1244px) and (min-width: 751px) {
//CSS RULES HERE
}
My sizing conventions (min width & max width) are completely arbitrary and I determine whether it works from trial and error. Often This doesn't work very well and I can't get the design to look good on all difference screen resolutions.
First of all.... Is there a best practice for the most ideal width ranges to use?
Secondly, is there a framework or template that will make all of this easier?
(That is not Bootstrap).
FYI: I use Foundation 6 to as a grid system but I haven't really found information much on responsive sites in Foundation 6.
Seems rare to me that you haven't found information about responsive sites on Foundation, this framework has been responsive from the beginning, and have wired cool stuff to help you on that matter. Just want to make clear I'm talking here about the Float Grid which isn't default anymore since 6.4 (but you can customize or switch up the grid in SASS settings).
Foundation grid has 3 default expected sizes: small (mobiles), medium (tablets) and large (desktop), in Float Grid you can use this way:
<div class="column small-12 medium-6 large-4></div>
This column will be full width on mobile, 1/2 width on tablet and 1/3 width on desktop; you can even ditch the small-12 because every column has full width (12 columns) by default.
That's the way you approach it from the grid... if you use the SASS version of the framework, you have another powerful tool, a mixing to set code for a specific breakpoint... let's say you want to apply some styling for medium size (and up), you just need to use this in your .scss file:
#include breakpoint(medium) {
// Your SASS/CSS code here
}
Please notice I said "medium and up", that's because Foundation is mobile-first, so everything you put in a smaller breakpoint, will be available on following sizes (unless you override them), if that philosophy is kinda awkward to you, and you need to put some code for only the medium breakpoint, you just need to put the code this way:
#include breakpoint(medium only) {
// Your SASS/CSS code here
}
That's a quite fast way to handle mediaqueries inside your code, totally aligned with Foundation code... the best part?, if you change breakpoint sizes at mid-development, you just need to change the sizes on the _settings.scss file and all code will update on the next build.
As you tagged this question on "Foundation" and mentioned on the question body, I did my answer deliberately Foundation-centric. Hope this helps.
I usually go for a single breakpoint at 768px.
With that I go for three queries (and they worked out pretty well so far) :
desktop (min-width is 768) [sheet #1]
mobile (max-width is 768) [sheet #2]
portrait (according to orientation) [sheet #2]
I don't think there's really a strict and fixed set of breakpoints that everyone should be using, I feel like it's more depending on what you need for your website.
Although, if you still wanna have a look at a set of breakpoints, I have bookmarked this a long time ago : ResponsiveDesign.is - breakpoints
You can use js to calculate the value of the font size in the HTML, then use a framework such as CSS to do the calculations dynamically
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to create a responsive webpage using bootstrap,but I'm confused on how to start.Can anyone help me to move into the right direction?
Here is my code
https://jsfiddle.net/c30a7bd2/It should be responsive for all the devices.
Despite the downvotes, here's some info to get you started.
Process:
Design from smallest viewport to biggest. i.e. design your responsive site first for mobile devices in portrait, then mobile landscape, then tablet portrait, then tablet landscape, then smallest desktop, then largest desktop. If you look at the Chrome dev tools, you will see an icon on the left-top to the right of the arrow icon. This puts the browser into responsive design mode that lists the most common devices. Very helpful.
Learn about media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
There is a lot of stupid confusion about how to use #media queries correctly. Let me set you straight right from the beginning.
You only need to worry about min-width. Don't think about ranges, don't use anything else other than min-width.
Here's why.
Since we're writing our css from the smallest device width first, as browser widths increase all we're doing is overriding earlier set styles. That's it. That literally is the secret to doing great, simple responsive css coding.
What breakpoints to use:
Again, lots of clever engineers try to be too clever. They introduce odd breakpoints, try to avoid pixel 'px' definitions, etc. Stop doing that.
Remember, since we're are writing our code mobile portrait first (the smallest device size), there is no media-query for this. Its just css.
Here's the breakpoints you should start with:
/* all mobile portrait coding goes first */
#media all and (min-width: 480px) {
/* this is the most common mobile landscape minimum width */
}
#media all and (min-width: 768px) {
/* this is the most common minimum tablet width */
}
#media all and (min-width: 1024px) {
/* this is the most common minimum desktop width. It also is the
most common minimum tablet landscape width. */
}
#media all and (min-width: 1300px) {
/* this is the most common minimum wide desktop width.
This is the only media query you might consider setting to 1200px
if your graphic design requires it. */
}
That's it. That is quite literally everything you know to get started writing great responsive css.
Just remember the key concept is utilizing inheritance. 80% of your css should probably be written for the mobile portrait size first. All of those styles get inherited into wider and wider screen widths. Then override them as necessary for the new wider screen. You will find that as your media queries increase, there is less and less css in them.
Have fun and write great code!
I am first year student Software Engineering and I use to have an assignment to make a web page. It is not complicated at all but after writing the web page I realised that when you open the site in smaller resolution (than mine 1080p) device it doesn't fit very well. I don't know what resolution uses the teacher who is going to assess me so i want to modify the site for 1600;900 and 1336:768 at least.
I should say that I used other suggestions that I should divide div tags by % not by pixels but it still doesnt work.
I googled the problem and I think I found a solution - actualy it is something with #media where you can set different percentages for different screen resolutions in advance and then you get the cliend screen resolution and open it in appropriate proportions
So I wanted to ask you how exactly to write this?
P.s you could take a look at my webpage here
The answer really depends on how intricate your site is, what the layout looks like, and what elements need to do at what sizes.
In general, HTML is "fluid" by default, so text will wrap, and elements will resize to fit their contents, so if your design is simplistic, you shouldn't have to do anything.
When you start sizing things with absolute/static pixel sizes, you get yourself into situations where things no longer fit.
You should generally avoid making designs that are fixed pixel sizes, and allow for elements to re-size naturally as HTML is designed to do.
#media queries are appropriate for changing appearances at specific resolutions, and are generally set up to make "responsive" designs, where elements can change styling or be hidden/shown at different resolutions. This is usually used for more complicated or dynamic layouts, and still needs to be planned for accordingly, because it is usually set up to accommodate a range of resolutions. For example an element might be 100% wide from 0 to 1024 pixels wide, and become 50% wide when the window is over 1024 pixels wide.
In the case of your web site, you are sort of breaking it by floating everything left. float tends to be really over-used in CSS without understanding its side effects.
Remove width from your menu element, and remove width and float from your content element.
This will cause the menu to be as wide as its contents (the buttons) and "float" next to the contents, which will try to be 100% wide, but be narrowed to allow the menu to fit next to it.
Good luck in school you will need to read up on responsive design which you acheave via CSS.
eg.
#media screen and (min-width: 500px) {
// Write your style
}
#media screen and (min-width: 501px){
// Write your style
}
That is what you need to do, there is lot of documentation and tutorials on this you will have no problem finding the resources.
Here is a TutsPlus page to get you started: Tutorial link
I want to develop a responsive web page using media queries.
I have also wrote media queries for mobile, tables & desktops.
But i am not able to understand that if I am writing the set of css code for device max-width:320px , then same code i have to write again for another device i.e 640px with difference sizes.
I am confused whether this is the correct way of writing media queries as i am writing the same set of css code for each & every device size again & again.
Please help me to proceed furthur as i am new to media queries.
And also i am confused whether to go for adaptive layout or responsive layout?
That's great of you & I appreciate the helpful answers given by you all.
I have given a task by company where they told me that i cannot use any frameworks for designing responsive webpage, I only have to use media queries for this.
This might clear all your doubts.This framework makes your work a lot easier. http://getbootstrap.com/
Hope it helps.
With the media queries you're telling to your code -Bro if the width if bigger than this "size here" (320px, 240em whatever....) then use this piece of code.
else if "next bigger size here" then use this other piece of code, and the same with the next #media queries
There is two ways to use it.
Coding thinking in mobile first (ULTRA MEGA recommended) or not :)
This mean, you create code for the small browser and then start adding mediaqueries for phablet, tablet and then desktop and wide screen.
This is so useful because help you to add in the page only the really important content and avoid the useless ton of information. because you started designing the small size and have to compress all the usefull info and put inside :)
Learn more about mobile first technique
#media (min-width: 320px) {
nav li {
display: inline-block;
}
}
The idea of media queries and of cascading style sheets in general is to progressively enhance your as you go forth.
This means: start your design aiming at mobile. Once done with that add a media query for your next bigger targeted viewport size.
In this query overwrite all styling that needs to be different for this viewport.
And so on ...
Want you do not want to do is writing all styles again an again.
Check out some popular frameworks to get inspiration like twitter bootstrap, html boilerplate or foundation framework.
If the design is the same, lets say for desktop to large wide monitors, we can do something like
#media screen and (min-device-width: 800px) and (max-device-width: 2048px) {
/* STYLES HERE */
}
supposing you want the same design for every desktop screen. This will help you cutting the code down and not rewriting it.
the below example you can understand than it is essay to understand the media queries.
1) if you say - min-device-width:320PX; this is last breakpoint of your design, below your design doesn't work.
2) if you say - max-width:420px; - this pice of code work until the 420px only after that the code which you mentioned in the breakpoint that doesn't work in remain widths.
basic break point: 320px -mobile size
480px -mobile size, 640px -mobile size,
768px -heigh-end phones,
1024px - pad.
as remain widths may be seems to work in desktop width.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
hope you get one idea if you read clearly.
I created a simple page with Axure in 2 versions (basically 2 adaptive views: base and 768 and below). When I generate the html, it works fine and follows the adaptive views. But this seems to work only with javascript, is there a way to deal with/generate the adaptive views in css? This could help me later on integrating the Axure generated html and css into my responsive design based on bootstrap. Thank you.
Pretty sure you're asking about responsiveness according to screen size. Bootstrap is built around these principles and the responsiveness is done purely through CSS using #media queries. All CSS starts on the smallest possible screen and then you can adjust your CSS to change as the screen size gets larger by placing # media queries at the bottom of your stylesheet. They are as follows:
#media (min-width:768px) {
This is where your CSS for anything above 768px goes
}
#media (min-width:992px) {
This is where your CSS for anything above 992px goes
}
#media (min-width:1200px) {
This is where your CSS for anything above 1200px goes
}
You can also use max-width in media queries
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.