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) { ... }
Related
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) { ... }
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 have created a site with the Blogger platform.
I have 4 pages on my blog, everything in the page list looks great on PC (this is my blog: https://www.onlinebouwdroger.be/p/home.html).
I want my mobile version to be just like the desktop version (so no Custom mobile template).
Here's the problem I'm encoutering (see screenshots below):
The pages bar shows only the first two pages on Mobile, and then puts
others in 'More...'
When clicking on 'More...' the page titles are
all messed up.
I would prefer to just have all 4 pages shown in the page list on mobile, just like on desktop.
I get that a mobile screen isn't wide enough to put the 4 titles in one row (like on desktop), but is there a way to put the last 2 page titles below the first 2 (so the titles are displayed 2x2)?
Or if not possible, the drop-down menu should at least look and work decently.
Like I mentioned, I want to show Desktop theme on mobile devices, not Mobile theme.
desktop view
mobile view without clicking on 'more'
mobile view after clicking on 'more'
How do I solve this issue so that the full page list is displayed on Mobile as well? (Without having to switch to Mobile template?) Or how do I make the drop-down menu look/function properly?
I've looked everywhere online, but can't seem to find a proper answer.
Thanks in advance!
Juliette
You can target smaller screens in your css like this:
#media screen and (max-width: 400px) {
myNavbar { css in here }
}
From there you can change how the links are displayed.
You have to add the CSS for the Tab inside media query to hide/show Tabs based on screen size
/* Extra small devices (phones, 420px and down) */
#media only screen and (max-width: 420px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) *\
#media only screen and (min-width: 420px) and (max-width: 768px) {...}
/* Medium devices (landscape tablets, 769px and up) */
#media only screen and (min-width: 769px) {...}
/* 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 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'm having different CSS files for different layout (Phone & Tablet). Since I have added styling in tablet view based on the view I get on my Samsung Note 8 with resolution 1200x800.
But when I run this application on Samsung Galaxy tab750 with resolution 1920x1080, I get smaller layout with smaller fonts since I have adjusted the fonts and layout based on Note 8.
So I get the suggestion to add the another CSS file for handling this. Next, when our QA tried running the application on iPad (Retina Display 2048x1536), again the third CSS is even small in it.
In 2012, there was a single tablet with a 2,560x1,600 resolution. In 2013, there were at least six. I suspect we'll see even more in 2014 (http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw).
With respect of this post Responsive Web Design and high resolution displays (iPhone 4/5),
We would be using media queries for required resolutions,
/* Large desktop */
#media (min-width: 1200px) {
font-size: 18px;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
font-size: 16px;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
font-size: 14px;
}
/* Landscape phones and down */
#media (max-width: 480px) {
font-size: 12px;
}
So my concern is can we handle this scenario, without going on adding more and more CSS and media queries, if so please suggests.
There are a number of media-query based ways of detecting high-density/retina devices.
I personally tend to use this, which seems to capture the vast majority of devices:
#media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2) {}
Totally personal preference though!
Do bear in mind that - to the most part - 'high density' screens (rather than just high-resolution) report themselves as their non-HD resolution for the purpose of media queries.
For example: the Retina Apple iPads have an actual screen-resolution of 2,048 by 1,536, but still reports as 1,024 by 768px. Thus, the same screen-width/height media queries will capture the iPad 4 (retina) as the iPad 2 and - apart from being a little more blurry in the case of the older iPad - will look the same.
You can combine the media query I've included above with width/height to get a much more granular target on specifically-HD devices if you wish.
One very important exception to this is high-density display devices running Windows 8 Mobile which has a known bug with correctly reporting the viewport.