I know how to choose one of alternate css according to browser width with css media property but.. what if I have to choose few of many alternate CSS...?
Suppose I have three themes on my webpage viz Red Green and Blue. Each of them have two variants _big and _small for browser width greater than 1024px and lower than 1024px respectively. So I have
Red_big.css
Red_small.css
Green_big.css
Green_small.css
Blue_big.css
Blue_small.css
Now I have three buttons to switch them. BtnR, BtnG, BtnB.
When I click BtnR, it switches the style according to browser-width ie if browser width is grewater than 1024px, then CSS selected is Red_big.css else Red_small.css...
and.. so on when I click BtnG or BtnB...
How to do that with javascript? Thanks.
make it one big CSS file, and use responsive inside:
<style type="text/css">
#media only screen and (min-width: 1024px) {
/* your css of 1024 px screen size */
.green {font-size:40px}
}
#media only screen and (min-width: 640px) {
/* your css of 640 px screen size */
.green {font-size:20px}
}
</style>
Ok try responsive css for example
min-width: 100%
this way the width will adjust with what ever the screen size maybe
hope this helps.
Related
My client want to keep same view of page from resolution 1680 to 980. Is it possible to keep same view on all resolution without increasing a single pixel or with out increasing the size of image.
Please help me.
Thanks
Photoshop is your friend, I would resize the image and have two image files one for mobile widths and one for Laptop, or Desktop widths. The most common problem is that the image size compresses to fit the width of the smaller screen when it does that the height drops to keep the image ratio. When you resize the image I would query the image.
<img class="img1" src="desktop-img.jpg"/>
<img class="img2" src="mobile-img.jpg"/>
then css query
.img1 {
display:block;
width:100%;
}
.img2 {
display:none;
}
/* ipad landscape */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.img1 {
display:none;
}
.img2 {
display:block;
width:100%;
}
}
you might add or change your queries ex.
#media only screen and (min-device-width://what ever size you want)
and (max-device-width://what ever size you want)
I have a website with a fixed-width layout, and that cannot be changed easily. Its width is around 1300px, so it doesn't render well on a smaller screen.
I am looking for a solution to make the website looks good even on small screens. It should be possile, because if the user changes the browser zoom level to something like 75%, everything looks quite good. But I read that changing browser zoom level is not possible in JavaScript, and that the behaviour of this feature is not consistent across browsers.
Is there a standard solution (a library or something) to solve this problem?
You already put the tag "responsive" in your tags. This means you know that you want a responsive website.
You could create mediaqueries on specific width's and set the zoom property to a suitable value (but Firefox does not support this: http://caniuse.com/#search=zoom ; you can use transform: scale() as fallback).
EXAMPLE:
#media (max-width: 600px) {
body {
zoom: 0.75;
moz-transform: scale(0.75, 0.75);
}
}
The best solution would be to create mediaqueries on specific width's and take the effort of changing the width's of the elements. I don't see why the width can't be changed easily.
EXAMPLE:
#media (max-width: 600px) {
.myElement {
width: 600px; /* whatever, maybe 100%? */
}
}
For a start include this meta tag to your page's <head>:
<meta viewport="width=device-width, initial-scale=1.0">
The above will force the website to scale on mobile devices. But you need to do some more work using media queries
You can create different rules for different screen sizes:
#media(max-width: 768px){
/** Small Mobile Screens */
}
#media(min-width: 768px){
/** Large Mobile Screens, tablets e.t.c */
}
#media(min-width: 992px){
/** Desktops, Laptops */
}
#media(min-width: 1200px){
/** Larger Screens (Desktops, Laptops, e.t.c) */
}
You can set the width of your page to a different size in pixels for every screen
Using javascript I create a meta viewport and assign to it a value of 980px. The script is this:
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=980, user-scalable=1";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);
In CSS, is it possible to write a media query that fires only when the viewport width is EXACTLY 980px?
Yes, in CSS it is possible to use #media rules to target an exact width.
CSS Example
#media (width: 980px) {
/* Your CSS */
}
This is telling the browser, when the viewport width is exactly 980px wide, apply the following CSS. When your viewport width changes to 981px or 979px or anything that isn't 980px wide, the CSS will be removed.
Unlike the other answers, this is not using max-width or min-width because the #media rules allow you to just define width, which will target the exact measurement you give it. The width is defined using the viewport width.
Note: You can learn more about the CSS3 #media rule from W3 Schools. Specifically if you look under Media Features, you'll see the available variables, including width all the way at the bottom.
You could do something like this. The media query will be triggered at 980px width and would work for width no greater than 980px.
#media screen and (min-width: 980px) and (max-width: 980px) {
html {background-color: red !important;}
}
html {background-color: green; min-height: 300px;}
You can use the exact width like this:
#media screen and (width: 980px) {
/* CSS rules here */
}
using both width and height exactly for ipad pro width:1024px, height:1366px
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px)
#media screen and (min-width: 980px) {
body {
background-color: lightblue;
}
}
I have the one form page. I need this form scaled and fit to screen width on any device (Android, iOS, ...). How can I do it with HTML or CSS? style="width:100%" is not a solution in my case.
Thanks!
Why is width:100% not an option?
You can use media queries to target different screen sizes like so:
form {
width: 800px;
}
#media only screen and (max-width: 800px) {
form {
width: 100%;
}
}
The above code would make form 800px wide on any screen wider than 800px, and if it is displayed on a screen size equal to or below 800px wide it will be 100% instead. You can use as many of these as you want, so for instance you could put another media query after this for max-width: 500px and change the form styles accordingly for screen sizes 500px and below.
I want to make my button controls resizable according to the screen sizes, like they should adjust themselves on other mobile devices as well(iPhones and iPads) .How is it possible?
Css3 has mediaqueries which allows you make screen specific styles. This is not very well supported in older IE's, that is why you always have to define an normal.
The cascading effect stays in affect, you do not need to redefine properties from normal in the mediaqueries (for example, background will be green in all scenarios)
/*normal*/
button{
width: 200px;
background: green;
}
#media only screen and (max-width: 600px) {
button{
width: 150px;
}
}
#media only screen and (max-width: 480px) {
button{
width: 100px;
}
}
This is called responsive design, the design responds to the widths. IE will do nothing, but if you are using Firefox and make the width of the browser smaller, it will hop automatically to the media styles
Well you gotta use media queries for that :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Use percentage based sizes on your elements so that they scale automatically, or use media queries for specific window sizes, and set your element sizes accordingly.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can make them resizable by setting their width in percentage, so that they would resize according to the screen size,
.buttonclass
{
width:80%;
}
This should work..
if you want to use pixels, then make use of media queries according to various screens you need to support,
#media screen and (max-width: 480px) and (min-width: 320px) {
.buttonclass{
width:300px;
}
}