I need to place some graphic elements in a div that is supposed to be seen on various screens with different resolutions (for example, mobile screens). Just for example, something similar to the "X" button that closes an overlay window. I might think of several options to implement it:
Have several JPEGs (one for each resolution) and select them in JavaScript
Render the graphics (it is simple) using HTML5 features
Any CSS support probably?
Anything else?
It would be great to have any kind of advice/well-known practice, so I won't reinvent the wheel.
css rule:
img {
width: 100%;
}
no?
And use #media rule:
#media only screen and (min-width: 768px) and (max-width: 991px) {
div {
width: 100px;
}
}
Related
I am building a web page which contains svg graphics. I want to make it responsive.
If the page is loaded on a physically small device, i.e. a smart phone, the graphics is too small to be viewed well, so I have to change it in case of a smart phone client.
The exact device or even the exact screen resolution is not important. Important is that I can answer the question "Is the client a small device?".
How can I do that?
Assuming that this is a common question, there should be a best practise for this or a common library. Can you help me?
I'd suggest doing it like this, putting this tag on the head of your index.html:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will allow you to work with media queries, where you can choose different css style properties depending on the size of the screen. Some examples:
#media all and (min-width:1200px){ ... }
#media all and (min-width: 960px) and (max-width: 1199px) { ... }
#media all and (min-width: 768px) and (max-width: 959px) { ... }
#media all and (min-width: 480px) and (max-width: 767px){ ... }
#media all and (max-width: 599px) { ... }
#media all and (max-width: 479px) { ... }
There are many other ways to set up the media queries, there is definitely one that is perfect for what you're trying to do.
W3 media query example
Using media queries by Mozilla
Finally, I'd suggest setting the height, max-height and width and max-width styles with the vh and vw units, such as:
height: 50vh;
width: 50vw;
VH and VW stands for viewport height and viewport width. This will make it so an image's size, for example, is exactly half the size of a device screen.
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
First of all, I don't have any code yet, as I'm asking what's the best way to achieve this.
I'm developing a website which has an image on the left hand side that has a slight 3D rotation:
What I'd like to do is change it's perspective on window width change, until it's like flat:
The idea is that on desktop PCs the image is on the left with the rotation, while on narrower screen widths the image is turned flat.
I've considered using the following methods:
CSS sprite + CSS media queries:
I'm not really convinced about using this, as in this way I think that I will not have a sort of "moving" effect when the window is resized, unless I create a media query for every 5px and create a very long image to cut
CSS transform?
Not sure if it's possible to create a sort of 3D effect to an image using only CSS and change the 3D value on window resize without using the above mentioned method
jQuery plugin
I don't know if there's something that allows my to achive this as jquery plugin, any suggestion?
Parallax.js
I've never used parallax, but it seams like you can move elements on the screen in various way, do you think it will be possible to use parallax for what I need?
I Hope my question is clear enough, sorry again for no code, but this is still in proof-of-concept stage.
Please ask for any clarifications.
Thanks and have a good day.
You can achieve this functionality rather easily combining a few nifty properties of css3: perspective, the vw unit and media queries.
See this Jsfiddle for a quick demo, resize the viewport to see the changes.
body {
-webkit-perspective: 250px;
perspective: 250px;
min-width: 500px;
}
#media (min-width: 500px) {
body {
background: blue;
-webkit-perspective: 50vw;
perspective: 50vw;
}
}
#media (min-width: 700px) {
body {
background: red;
-webkit-perspective: calc(500vw - 3150px);
perspective: calc(500vw - 3150px);
}
}
img {
width: 400px;
height: auto;
transform-style: preserve-3d;
transform: rotateY(1rad);
}
<img src="http://i.imgur.com/qY1SdO0.jpg" />
I'm quite new to web-design, but know most of the basic stuff, but please try to keep it relatively simple) So, I'm designing a web-site, where I want to have grey background on the sides of the main page, which I managed to do. However, I want the page to "eat up" the grey space if the window is resized, just like Marriott hotel uses I have tried looking their code up, but it's a lot and I don't think they use CSS but JavaScript for resizing dynamics. Am I right? If so, is there a way of doing it with CSS? Or java, but relatively simple, I'm very new to it!
Also, I have currently given the wrapper a width of 88% and used the 12% as the grey background. Is using % the best solution for different screen resolutions? (Keeping in mind that it would be for PCs and tablets at the most, no smartphones)
Using percentages can be useful, but if you truly want things to look how you want them to on a smaller screen resolution, you can use media queries.
Media queries work well because they can even change the styles depending on device orientation:
#media (min-width: 700px) and (orientation: landscape) { ... }
Using a media query. (Make the window bigger & smaller to see it in action.)
I think what you want is the following:
Add a background to the body.
Add a div with X px and margin auto, that will center it.
So then, when you resize the window, this will "eat" the margins from the body hidding the grey background.
If what you want is different sizes for the web depending on the width screen, then you are entering to media queries.
You are looking for:
#wrapper { width: 900px; margin: 0 auto; }
This will place your wrapper (with a 900px width) with even margins on the side and then recalculate the margins as the window changes.
I would give your wrapper a set width since setting a width of 88% means that the center content will ALWAYS be 88% of the window which means you will always have margins.
You may do it this way
here is the fiddle: http://jsfiddle.net/fcvbkv5w/
body {
text-align: center;
}
#navbar {
width: 100%;
margin-left:0%;
background-color: black;
text-align: center;
}
#fwcenter {
width: 70%;
position: relative;
text-align: center;
background-color: red;
}
#media (max-width: 700px){
#fwcenter{
width:100%;
}
}
<div id="navbar">
<center>
<div id="fwcenter">
<div id="container">
Website content
</div>
</div>
</center>
</div>
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;
}
}