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.
Related
My main smartphone is a Galaxy S8 Plus.
The media queries for this device are:
#media only screen and (min-width: 360px) and (orientation: portrait)
Let's start with the portrait orientation. This one, I'm understanding 100%, but here comes the problem.
This is the media query for landscape:
#media only screen and (min-width: 740px) and (orientation: landscape)
Everytime I code in this media query it applies to my desktop which has a 1920 * 1200 resolution. I know it's influenced by the min-width: 740px.
Now, my question is are:
How do I tackle this problem?
Can I create a single query that covers both portrait and landscape?
If so , what are the best practices for units in responsive web design? Right now I'm using vh and vw in my project, but I think it creates a mess sometimes.
And one last question: how do I cover most devices out there with a minimal use of queries?
Good CSS is minimal. Test my approach:
Global styles on top. For example font colors, font weights, backgrounds etc.
Then, use media queries:
#media screen and (max-width:1200px){
}
#media screen and (max-width:992px){
}
#media screen and (max-width:640px){
}
and so on... Higher widths are on top. In "mobile-first" approach, use min-width, and then lower widths are on top.
Try to avoid orientation property. Use this property only when you really need it.
vw and vh are convenient but remember that they are not supported on older browsers.
Bootstrap is good framework but you should learn how to make logic CSS from the scratch first. Keep up the good work.
To deal with the problem that it applies to desktop change min to max, there is a "standard" for what the media queries should be seen here, your media query described the medium size of < 768px for horizontal and very small size of < 576px
You don't need to include the orientation, you can simply write #media only screen and (min-width: 740px) then you apply for both, but you should have two media queries to make sure you cover both
vh and vw work best for creating responsive design, however if you are coding for IE then it might a problem, and you will need to find an alternativ to calculating height
Use Boostrap, it does everything for you almost
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
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!
My site(www.acweb.com.cy) is having a problem showing the navbar on the top right of the screen. When its resized on at the width of 768px its displaying both the "js-fh5co-nav-toggle fh5co-nav-toggle" and the regular navigation bar which is the horizontal for the bigger screens. So when its open on my small ipad is showing both the navbars.
Second off all i dont know much of sass and am using the koala program to edit the templates scss files. Additionally i removed all _(underscore) from the scss filenames cause koala wouldnt read the files. At last when am loading the site and opening the developer inspector within firefox the navbar is read as _navbar.scss instead of navbar.scss as i renamed it.
Thanks for the help!!
Your responsive media query codes are colliding at some places, you need to correct that. That's the reason both navbar are visible from 768px to 765px.
This is what your max-width and min-width are at present as below,
#media screen and (min-width: 768px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
You need to either increase or decrease any one of there width. You can make changes as below,
#media screen and (min-width: 769px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
So when its open on my small ipad is showing both the navbars.
iPads have a different pixel density than your normal computer monitor, this may be confusing when using css media queries and might even fool your css into thinking it's in a totally different media query.
I suggest checking out this site to get an idea of why your iPad is showing such a different website than your desktop/laptop:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
For more information about pixel density and specifically Apple's Retina display, this is where you need to be: https://en.wikipedia.org/wiki/Retina_Display
Quick workaround (not the best possible solution)
At the bottom of your main.js file, add this line after all the other methods:
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
So that your function will be:
// Document on load.
$(function(){
parallax();
burgerMenu();
clickMenu();
windowScroll();
navigationSection();
goToTop();
// Animations
homeAnimate();
introAnimate();
workAnimate();
testimonialAnimate();
servicesAnimate();
aboutAnimate();
countersAnimate();
contactAnimate();
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
});
This will remove the general class when both of them are used for the navigation.
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