Would it be possible to say something along the lines of:
100% screen width = 20ems -OR- 1em = 5% screen width ?
The idea would be to have the font, and anything else specified in ems, automatically scale with the screen.
Working on a responsive layout and I am trying to avoid any explicit measurements; everything is in % to start but I'm trying to figure out an effective way to use ems as well as %. If I could fix the ratio of ems to screen width it would help.
If this is possible, what is the minimal approach? Right now I am using nothing but CSS & HTML. I would rather avoid javascript, etc. if I can.
As Hakan mentioned the viewport units would be one possibility, yet not really smart option, as the support sucks right now. The best approach to this would possibly be to set mediaqueries and then adjust your font's for different screen sizes.
For example:
#media only screen and (min-width: 1024px) {
body {
font-size: 20px;
}
}
#media only screen and (max-width: 1024px) {
body {
font-size: 18px;
}
}
Here is a good explanation on the whole viewport and mediaquery topic http://www.quirksmode.org/mobile/viewports.html
Although it doesn't have a full support in current browsers, vw and vw might be what you are looking for. Check it here: http://caniuse.com/#feat=viewport-units
Also you can try fittext.js.
To expand on my earlier comment, This can't be done with em (at least not pure css) But vw, vh, vmin and vmax might be worth looking at. Otherwise there is always media queries.
VW Demo:
http://jsfiddle.net/95aLqbfw/
Related
I recently made new HTML document in my computer. When I share it with other comp. which has small size monitor then everything is messed!!!
I just wanted to know if I can make a code which changes the width of the items in webpage according to device width...
Then afterwards I thought to use % in width instead of pixels (px). It worked but not how I wanted it . So I still need help...
Thank you!
What you're looking for is media queries. Using media queries you can style your page using CSS based on the page max/min width.
Take a look at this for further info.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Here is an example when a screen has a max-width of 900px and when that is applied the following CSS will be applied. Anything outside of that range will have the above CSS applied
.example {
font-size: 7rem;
width: 75%;
}
#media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
width: 50%;
}
}
A website designed to change its contents according to how big (or small) the monitor or screen is designed with Responsive Design principles in mind.
Responsive designs can be achieved with CSS media queries. Check out the MDN documentation on Responsive Design here.
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 was wandering if in 2016 is the correct time and place to use css3 vw & vh units for creating responsive sites, from my experience this is the easiest way to make it happen... but i have not seen almost nowhere using this technic. Why is that so? And if you have better way doing responsive sites pleas share...
VH and VW are relative to the height / width of the viewport, so they are ideal for scaling elements based on the viewport size.
For example if you want a 2 column layout, specifying the width of each column as being 50vw will work well. According to Can I Use browser support is good if you don't need to use vmax.
Scaling is one aspect of responsive design, another is changing the page layout.
As correctly noted by George Chanturia below, the following comments refer to adaptive design, not responsive design.
Say you wanted your 2 column layout to collapse to a single column on smartphones you'll probably want to use media queries and pixels or rems or ems
eg
#media only screen and (max-width: 25em) {
...
}
or
#media only screen and (max-width: 400px) {
...
}
For sure you could use VM and VW inside those media queries but it's not a feature you can test for in the actual media query.
Hope this helps.
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.