I am creating large web application using Foundation 3.0 UI framework and it have px based layout and font-sizing.
In design there is "em" based font-size/line-height and padding/margins. I want to know that Is it good option to choose "em" based font size and padding for responsive layout for smartphones?
I think the main advantage for em in terms of responsive design is the way that you can so easily change the font size for different screen sizes.
E.g. if you use media queries for large screens and small screens (say, mobiles and TV's) you're going to want to change the font size for both of them.
If you have everything sized in em's you can simply change the font-size on the body, like so:
/* For TV's (or other large screens */
#media screen and (min-width: 1800px) {
body { font-size: 1.4em; }
}
/* For mobiles */
#media screen and (max-width: 400px) {
body { font-size: 0.9em; }
}
Where as if you had everything sizes in px you've have to do a LOT more work resizing the font's.
EDIT: Using em for margins + padding may also be a good idea for a responsive layout, as I understand it, if you resize the body font size (as shown above) you'll also resize the margins + padding (making them either smaller or larger) which could also be very beneficial for a responsive design.
Yes, using em and % over px is definitely better for responsive design websites/applications, because unlike px which is an absolute value, em can be scaled depending on the resolution it's viewed at which is crucial if you want to target smartphones, tablets etc.
Related
im trying to style the page based on different phone sizes. I know that I can use media queries, but what if the width of the phone is the same, but height is different. For instance, both Iphone X and 6,7,8 has the same width, but different length
Pretty much what Carl said in his comment.
The following is a valid example:
#media only screen and (max-height: 600px) {
body {
background-color: lightblue;
}
}
To do that you should use media queries (as already mentioned).
Not only can you change stylistics according to screen max-width and max-height, but also to orientation: portrait and even aspect-ratio:.
Apart from that I think you could make css rules around the concept of relative units.
You can make whole content scalable
- not just
div { width: 20vw; }
but also
p { font-size: 5vmin; }
That way you won't need to worry about weird aspect ratios or different resolutions.
I am building my project. I just noticed that I made a big mistake with using just pixel values in tables, sidebars etc. So it makes a problem, like if other person has different resolution in computer my website looks shapeless and bad.
Which codes I should use to apply responsive design?
As I know to use width, height values with % is useful. Also I don't know exactly how to use % values. What else I should do?
I use "rem" units to avoid problems (including the "media" max/min widths).
Consider 1rem = 16px for your desktop desing and 99.99% times everything goes well even in almost unknown devices.
https://www.w3.org/TR/css-values-3/#font-relative-lengths
EDIT: (cause the comment)
There are different things.
1.- Use "rem" to size things (like font-size: 0.875rem in spite of font-size:14px) to keep thing with adecuate proportions to the size of the pixels, 2.- Use #media queries to change layout when the screen is to wide/to narrow, that sizing can be done in rems to, so min-width 20rem means (more or less) the width of 20 "M" letters (not really true, but close).
Let say you have a 24 inchs screen with 1480px, and your friend have also 1480px, but in just 6 inchs. If you make font size 12 px you will see pretty nice, but probably your friend will find it small. The device/browser developers can define a different rem size, acording to the physical size of the device (24px, for example) and your 0.875 rem will be 21 pixels in his screen (not so small, more comfortable to see)
The change in layout to adapt to a narrow screen can be done using those rems also, so for the same 1480px he can have a more comfortable layout. You have a screen 1480/16=92,5 rems width, but he have 1480/20=74 rems width.
You can use percentage values just like you would use pixel values. If you want 1/4th of your website to be a sidebar, it can be as easy as:
.container {
width: 75%
}
.sidebar {
width: 25%
}
This wil make the container take up 75% of the browsers window. Since there is 25% space left, you could neatly fit a sidebar next to it by making that 25% width (you might need to add float:left to both elements).
However, I can image that on mobile view you would like your container and sidebar to be 100% width. You can do this by using media queries:
//medium phone size
#media screen (max-width: 425px) {
.container {
width: 100%
}
.sidebar {
width: 100%
}
}
There are several solutions:
Use media queries to your pages.
Use a CSS grid (and media queries)
Use Flexbox (and media queries)
Use an other css framework including a grid system
You can start with Bootstrap. That will not only make your site responsive but also there are many predefined designs for the HTML elements like buttons, fonts, tables etc. You will only have to use the classes.
If you are not well accustomed to Bootstrap the do as #Damian Makkink and #Marc_DNL have posted.
IMO a self-built CSS for a responsive site and design is better. Initially, in my hobby project, I started with Bootstrap but I have completely phased that out.
I am making a webpage in Google Sites, and am running into a seemingly common problem. How do I make the text size smaller when the window becomes smaller? I am very new to HTML, so I need a simple answer with some sample code. I am not sure, but I think Google Sites only allows HTML. Unfortunately, I am unable to attach more than the following code, which I hope is enough:
<font color="#000000" face="georgia, serif" size="4"><span style="line-height:40px">This is code</span></font>
Using the VW CSS property.
Example:
p {font-size: 4vw;}
Only works reliably on HTML5 compatible browsers.
Spec: https://developer.mozilla.org/en-US/docs/Web/CSS/length
1VW = 1/100th of viewport width. Adjust the value before the vw to adjust the amount of autoscale you want on your type.
Edit: As others have noted - you can also use media-queries, but the scaling is not smooth and will jump to each new font size at each break point. This is fine for body copy where you want exact control over font size - however, if you want proportional scaling at all viewport sizes, not just at predefined breakpoints, use VW.
You should be using css media queries:
#media only screen and (min-width: 768px) {
/* tablets and desktop */
font-size: 16pt;
}
#media only screen and (max-width: 767px) {
/* phones */
font-size: 12pt;
}
#media only screen and (max-width: 767px) and (orientation: portrait) {
/* portrait phones */
font-size: 18pt;
}
if you don't know how to add a css file you can read in this link:
Adding Css file
Two Tips:
1) Use relative font size use em. em sets relative unit based on the computed value of the font size of the parent element. e.g.
`font-size: 2em;`
2) For more specific font add addition media queries based on screen size.
I hope this helps
If the average / most popular screen size width is now more than 1366px, why is bootstrap widest container (from their CDN) at max-width:1170px?
.container {
max-width: 1170px;
}
Should I not believe everything I read?
This is from many sources by the way, not the first one I came across.
The underlying reason for the question is I want to design for max width desktop use - I'll worry about tablets and phones when desktop design is finalised.
About screen resolution
According to screenresolution.org, the actual most popular resolution is 1366x768, not more.
About those 1170px
For desktop display, Bootstrap use a 1170px width, with a padding of 15px on both left/right sides :
#media (min-width: 1200px)
.container {
width: 1170px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Quick calculation : (1366 - 1200) / 2 = 83.
The Bootstrap desktop layout keep (at least) a margin of 83px on both sides of your screen (98px if you count the padding). That's not that big, and it avoid the page to look congested. For a counter-example, Wikipedia use a 100% width layout, but many people think it's "too-much", it decrease readability.
What if I want to change this ?
You don't have to be worried about Bootstrap width. Of course you can change it.
Almost everything is set in percent in Bootstrap 3.
Have a look on Bootstrap customize & download page, you'll find a few variables useful :
Media queries breakpoints
#screen-xs-min: 480px
#screen-sm-min: 768px
#screen-md-min: 992px
#screen-lg-min: 1200px
Layout and grid system
#container-sm: ((720px + #grid-gutter-width))
#container-md: ((940px + #grid-gutter-width))
#container-lg: ((1140px + #grid-gutter-width))
#grid-columns: 12
#grid-gutter-width: 30px
#grid-float-breakpoint: #screen-sm-min
The Galaxy S4, for example, actually runs at 1080p. Put it in portrait mode and you'd think it would run the full desktop site, which sounds terrible when comparing that 5.5" screen with my 24" LCD for example. It seems the phone manufacturers have put in a "fake" resolution to the browser, possibly with some sort of "zoom". I would test on an actual device, or at least an Android emulator, to see what the behavior is. I usually get the correct site even though it has a high resolution.
It could be because the Bootstrap devs recognize that many developers won't have content prepared to go that large, and it's trivial to change the width.
How to change navbar/container width? Bootstrap 3
Bootstrap: how do I change the width of the container?
I have simple pages completed that seem to respond well to different size screens. I haven't done anything fancy to achieve this - just avoided fixed sizes etc.
One page, however, has a large single word in a large font:
When I resize the browser, all other content lays out correctly, but the title word of course won't break:
What is the correct way to handle this? Is there some way to adjust the font size based on the screen width?
Another option is to use viewport-percentage lengths.
vw unit: Equal to 1% of the width of the initial containing block.
You can read more about it on CSS Tricks which discusses a repaint bug for certain browsers, but you can fix it with a little jQuery.
http://jsfiddle.net/7L9QH/
CSS
h1 {
font-size: 25vw;
}
You can use media queries like:
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background: #ccc;
}
}
Some more info can be found here: http://css-tricks.com/css-media-queries/
Have you tried FitText?
It is a jQuery plugin made for that occasions. Quoting their description:
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.