So I have a webpage with a banner (1024 pixels) and then some pictures in the center region below. I'm looking with CSS (or some other alternative) to start resizing all the images (banner and page icons) downwards automatically if the size of the page in the browser is less than the minimum banner width and if it greater than this minimum size, none of the images are scaled (the banner is on a transparent background so it "resizes fluidly").
This seems like a pretty basic question so I doubt it'll really require all that much but all the other references I saw didn't do it for me (and I am really inept at CSS). Any advice is appreciated and thanks in advance!
Use media queries in your CSS - something like this:
#media screen and (max-width: 400px) {
#container {
width:320px;
}
}
#media screen and (min-width: 401px) and (max-width: 900px) {
#container {
width:700px;
}
}
#media screen and (min-width: 901px) {
#container {
width:900px;
}
}
(You can adjust the numbers/brackets).
Then set your image widths as a percentage of the container.
Related
Here, the image is responsive, can be multiple sizes and I want the padding-top of the container to be responsive to increase with the image size within it. How can I achieve this?
<div class="container>
<img class="content">
</div>
The most obvious answer would be to set media queries that match the ones the img is using. So, if the image has three sizes at 0-350 width, 351-760, 761+, you would need three media queries:
#media only screen and (max-width: 350px) {
.container {
padding-top: ...
}
}
#media only screen and (max-width: 760px) {
.container {
padding-top: ...
}
}
#media only screen and (min-width: 761px) {
.container {
padding-top: ...
}
}
If that doesn't suite you, then you'd likely need to know the img's height. CSS can't do that, but javascript can with clientHeight:
const img = document.getElementByClassName('content').clientHeight;
Note that this will tell you how many pixels the "inner" part measures (actual height of element + padding but NOT border/margin).
After that, you'd be adding classes you've made with the appropriate padding, again with javascript.
so like:
const img = document.getElementByClassName('content');
img.classList.add('whatever-specific-padding-class')
This is why I think the CSS/media query answer is probably better. You have to write separate classes anyway. Otherwise, you'd likely resort to inline styles which are no bueno.
I have come across numerous solutions from different articles but which one would put the least strain on the CPU?
There is
https://scottjehl.github.io/picturefill/
https://github.com/teleject/hisrc
but which one is recommended and has the best compatibility with browsers?
It depends on what you plan on doing. If you don't want elements to have a background image if the screen size is too small then you could use media queries e.g.
#media screen and (max-width: 300px) {
body{
background-image: none;
}
}
}
#media screen and (min-width: 301px) {
body{
background-image: url("/url/to/image.jpeg");
}
}
}
But if you want to control whether a certain image tag's source is loaded you could do this:
if(screen.width > 300) image.src = "/url/to/image.jpeg";
On the other hand, you could just hide the image tag using the same media queries
Use the css #media to detect the screen width to control whether load or not load image.
#media screen and (max-width: 400px) {
img {
display: none;
};
}
or use javascript.
$(document).ready(function(){
if (screen.width <= 400px) {
$("img").css('display', 'none');
}
}
);
I have an requirement that an application(HTML, CSS and Javascript) should adjust automatically to screen window size - from laptops, to desktops to tablets.
Does anyone know how can this be done?
You need to study Responsive Design. But I'll tell you the big key: media queries.
With CSS like this
#media only screen and (max-width: 500px) {
#mydiv {
width: 80%;
}
}
#media only screen and (min-width: 501px) {
#mydiv {
width: 50%;
}
}
you can do all you need. In fact, for some screen sizes you can set #menu1 to display:none, and #menu2 to display:block, and thereby show entirely different layouts dynamically based on the screen size.
Try this link for a very minimal example you can play with
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints
I been trying to think of a way to change the font size as the parent element sizes changes. Most likely this would be due by the browser size being changed. Such as when I make my Chrome smaller the font will become smaller as well as well as vice versa.
I was thinking media queries, but it also wasn't suiting what I exactly want. Media queries great for detecting what device being used and all, but not how I want it to be. I was thinking the answer lies in some kind of JavaScript, but if there was an answer that uses CSS I would prefer that. I've done some research, but couldn't find exactly what I wanted.
You can use mediaqueries.
i use this for my test :
#media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
#media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
#media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
#media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
#media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
#media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
#media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
#media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
#media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}
Size chosen might not be the best, the transition is to avoid jumping size to size while resizing window.
Have fun !
All plugins are crap. Just try using simple css for it.
Example:
#media screen and (min-width: 1200px){
font-size:80%;
}
#media screen and (max-width: 768px){
font-size:90%;
}
#media screen and (max-width: 320px){
font-size:80%;
}
They will be flexible on each and every viewport. Hope this helps you.
The fit text plugin is really interesting for large fonts. If you are thinking of text and paragraph fonts, it's maybe not the best solution though.
The media query solution is the most common approach, though there is also a technique called responsive typography, where the font sizes change not in predetermined steps, but progressively as the wiewport changes.
Essentially you size the fonts as a percentage of their parent element, for example a percentage of the body width. The best description I know of the technique is http://www.netmagazine.com/tutorials/build-responsive-site-week-typography-and-grids-part-2
Good luck!
You can use CSS3 vh, vw,vmin and vmax new values for responsive font.
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
More details: https://css-tricks.com/viewport-sized-typography/
http://fittextjs.com/ here is a nice plugin that does exactly that
I have a problem with a small mobile image gallery. When I change the orientation to portrait the images are too large to be displayed on the screen.
Is it possible with some javascript to make images fit the screen when the orientation changes to portrait? In landscape mode, everything looks fine.
yes, you can use CSS3 Media Queries without using JavaScript.
#media screen and (max-width: 450px) {
img {
width: 30%;
}
}
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Try this:
#media screen and (orientation:portrait) {
//your css code goes here
}
#media screen and (orientation:landscape) {
//your css code goes here
}