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.
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.
It's far simpler to point to an example than to try and explain the problem I am trying to solve so I'll do just that (apologies to people on mobile, this won't work...)
The effect I want to achieve can be seen on VICE news (http://news.vice.com)
As you can see while resizing the browser, the aspect ratio of the image remains intact throughout certain sizes. It jumps at 1200px and again at 700px, all the while scaling both the width and the height.
Is there a way to achieve this using only CSS? My head is stuck on this one.
Thanks!
Media queries, of course.
If you look in their source code, you will see that they have 3 different versions of the same image to display at each different size (to minimize scaling). Then, by using media queries, they will display the proper one and have its width fill the page:
Here's the mobile image, for example:
#media only screen and (min-width: 43.75em)
{
.lede .lede-images img.mobile
{
display: none;
}
}
And here's the global code:
.lede .lede-images img.mobile
{
width: 100%;
}
Setting the width to 100% while not setting the height will automatically maintain the aspect ratio while resizing.
If the user reduces the browser window below a certain resolution, say 320 width, I dont want any further css layout changes to take effect. Basically what ever the layout is at 320, I don't want to change this any further, it should just hold the 320 view.
Would I use a fixed width with a media query?
Yes a media query is exactly what would fulfill this purpose. Specifically:
<style>
#media (max-width: 320px) {
body {
width: 320px;
}
}
</style>
And here is a demo
Q. What technique is the most efficient in terms of image load times and performance...?
Scenario 1.
Is it to load a different size image by using a media query, as below:
/* Smartphone */
#media screen and (max-width: 320px) {
.img-page-1-img {
background: url('../images/img-page-1-img-117.jpg') no-repeat;
width: 117px;
height: 77px;
}
}
/* Desktop */
#media only screen and (min-width: 769px) {
.img-page-1-img {
background: url('../images/img-page-1-img-234.jpg') no-repeat;
width: 234px;
height: 154px;
}
}
OR...
Scenario 2.
Load one single large image and use CSS to "stretch" and resize by setting the max-width property..?
img {
max-width: 100%;
}
Thanks....
Perhaps, an even more appropriate and/or responsive approach is to combine both. Use second img as a fallback and use media queries with resolution to specify the image:
img { ...low-res source }
#media (min-resolution: 2dppx) {
img { ...hi-res source }
}
An agent that understands high-res may throw away first request and fetch hi-res image only; in the worst case there would be two requests. Everyone else will only fetch low-res source.
resolution is currently in W3 Candidate Recommendation
for responsive design we need to add this to get original image for large screens
img {
max-width: 100%;
}
and inside the media queries add like this
#media screen and (max-width: 320px) {
width:117px;
}
and dont set height. you just control the image with parent by setting
overflow:hidden; height:117px;
**
and better to avoid background-images in responsive design, if you are
using you should need 4 to 5 images for each set. Try to use img tag
**
Putting the different images in media queries won't work as some browsers will just preload all assets (even the ones that are no match for the current viewport).
See: http://www.nealgrosskopf.com/tech/thread.php?pid=73 for a nice overview.
I'd go for div's with data attributes that contain a reference to the image to load. Check window width (or use matchMedia) with javascript and create the image on the fly.
For images that are really important (content wise / need to be indexed) you could add a small version initially and replace it with a high resolution version if the window is wide enough (or media query is matched using matchmedia).
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.