Which is the better way to create a responsive website among grid, media queries, and HTML tables.
often neglected by developers when it comes to responsive websites: Typography.
Typography!
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width:960px) { body {font-size:1.2rem;} }
#media (min-width:1100px) { body {font-size:1.5rem;} }
There are lots of ways to create a responsive behavior in css, you gave some good examples for them.
Personally, I'm using the Flexbox and Grid display methods to align html containers and contents, and by using Media Queries i can make them interact responsively for any device.
For example, if you wanna render a cards-based container, meaning there will be multiple div elements with their own contents, aligned in a straight line, i would use the flex-wrap property to break them instead of overflowing to one of the page sides. If the cards are getting small enough for the page, i'd use the vw value for my card's width at a certain page width, using media queries.
Of course you can have your own preferences for different responsive methods, and there are a lot you can search on the internet, i just gave some of my own.
Use media queries and flex,
Some example breakpoints,
// Extra large devices (large desktops, 1200px and down)
#media (max-width: 1200px) { ... }
// Large devices (desktops, 992px and down)
#media (max-width: 992px) { ... }
// Medium devices (tablets, 768px and down)
#media (max-width: 768px) { ... }
// Small devices (landscape phones, 576px and down)
#media (max-width: 576px) { ... }
Related
What is pixel perfect design? is it not responsive? i saw many tutorials on youtube ( figma to html css) and all of them are using the same css which is defined in figma for each components. like 283px and 90px width for a box. My question is how can i make this responsive if it is fixed in pixels? if i make 3 layouts of design ( mobile ,tab, desktop) then it works properly on these specific resolutions but don't work properly between those 3 (mobile,tab,desktop) resolution. If i use rem, it doesn't work responsive. I want to learn how to code Figma/xd/psd to HTML CSS.
Responsive Design is a topic in of itself and you seem to have little prior knowledge about it. There are many web frameworks and practices that help you create responsive designs. Without an example of what exactly you are trying to achieve it is hard to help you. Let me try anyway:
You are correct about absolute units not changing upon device-size. The best ways to have responsive code straight out of Figma is to make a lot of use of its constraints. You can set sizes to scale with the parent, keep left and right margins, use auto layouts (translates to flexbox css) and so on...
In general css provides you some relative units like %, em, rem, vw and vh: https://fullscale.io/blog/best-css-unit-for-responsive-web-design/
rem is relative to the root- element's font-size.
em is relative to the parent element's font-size.
% is simply the percentage of the parent element's width.
vw and vh are the percentage of the viewport's width and height.
I'd also suggest you look up #media breakpoints which are a way to apply css styles to different device sizes: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
I understand that Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. So it helps makes the websites responsive and stuff. Currently, I have another file for css where I use media queries and re organize my css layout through that (thats how I make it responsive).
Does Bootstrap handle all media queries for me, or will I need to do additional legwork?
That's correct, all media queries are handled by bootstrap. You just need to assign the appropriate classes to your html elements.
More information on the grid system can be found here:
http://getbootstrap.com/css/#grid
You'll have to modify your html won't have to make any additional css modifications for bootstrap to work 'out of the box'
Bootstrap uses four devices sizes: XS, XM, MD, and LG. Here are the media queries that bootstrap uses. You may want to compare so that you can make sure your system is close to theres. Otherwise you may need to do a larger overhaul.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
I use Twitter bootstrap framework for designing my Web application. When i think about responsive design is it all about designing my layout responsively or should i also think about Text box, Labels, Buttons and other components to be responsive as screen gets bigger.
And which would be the best resolutions that i should follow to create a responsive design, where i could notice all most there are number of devices that keep evolving with different resolutions every day.
Currently i have developed my app which is responsive with layouts, text box, buttons, labels and headers on all resolutions between 1024 -1439, 1440- 1659, 1660 - 1920.
and less than 1024 and Greater than 1920px.
And how should i use scaling on responsive design.
I would like to know if this is the industry standards or is there anything else should i keep in mind before developing Web Application.
Twitter's Bootstrap is responsive by default. This include all components and the grid(s).
To find your answer, please first study http://getbootstrap.com/css/#grid
Twitter's Bootstrap defines four grids. The largest grid has a max container
size of 1170px.
The large (col-lg-*) is bound by:
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Your design requires a larger grid, for at least 1920px and up.
Where 1920x1080 seems to be an industrial standard: http://en.wikipedia.org/wiki/1080p
According Bootstrap's grid definitions, i expect you should extend the grids with a larger grid. See also:
See also Bootstrap 3 - 940px width grid?,
Twitter's Bootstrap 3 grid, changing breakpoint and removing padding
To add and extra grid, download Bootstrap's LESS files from: https://github.com/twbs/bootstrap/tree/master/less, add a extra grid() and recompile your CSS.
In grid.less replace:
//or define in variables.less
#screen-superlg: 1920px;
#screen-superlg-min: #screen-lg;
// Large screen / wide desktop
//or define in variables.less
#container-superlarge-desktop: ((1860px + #grid-gutter-width));
#container-superlg: #container-superlarge-desktop;
.container {
.container-fixed();
#media (min-width: #screen-sm) {
width: #container-sm;
}
#media (min-width: #screen-md) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
/* Larger devices (HD TV, 1920px and up) */
#media (min-width: #screen-superlg-min) {
width: #container-superlg;
}
}
and add:
// Super Large grid
//
// Columns, offsets, pushes, and pulls for the hd tv device range.
#screen-lg-max: (#screen-superlg-min - 1); // define in variables.less
#media (min-width: #screen-superlg-min) {
.make-grid-columns-float(superlg);
.make-grid(#grid-columns, superlg, width);
.make-grid(#grid-columns, superlg, pull);
.make-grid(#grid-columns, superlg, push);
.make-grid(#grid-columns, superlg, offset);
}
After doing this you can use the new Super Large grid by using col-superlg-* grid column classes.
After this you should also have te extend the Responsive utilities (http://getbootstrap.com/css/#responsive-utilities) defined in less/responsive-utilities.less.
I have question, how I can create layout which, which column set differently for different screen sizes
I have example:
http://jarock.pl/rock/assassins-creed-iv-black-flag-lets-play/
When you change size for small left column will move down.
You need media queries.
#media (min-width: 700px) { ... }
I do not understand why Twitter Bootstrap is considering the tablet size from 768 to 979, and not from 768 to 1024 (iPad). The problem is that if a client requests a custom design for tablet, that tablet design will not be visible on iPad in landscape mode.
Also if I have a content with sidebar (span9 + span3), if the sidebar is "hidden-tablet", the content will not expand, in fact it will have the same size and I have to overwrite bootstraps span dimmensions to achieve the desired layout.
Am I doing something wrong?
1) I think the idea here is that in general if someone is requesting a page that is over 980px its more likely that its from a desktop computer than it is from an ipad. Also you could just make your page ipad AND web friendly for those widths :).
If you have to have a different design for landscape ipad and the web, an option would be to do write a bunch of custom css for when the screen is between 980 and 1024px.
#media (min-width 980px) and (max-width: 1024px) {
//my custom css for ipad landscape
}
2) You are doing it right. All .hidden-tablet does is set display: none;
#media (min-width: 768px) and (max-width: 979px) {
// ... some other code
.hidden-tablet {
display: none !important;
}
}
It does not do any other type of resizing, so thats on you to do with media queries.