This question already has answers here:
How to change CSS when the screen size changes
(4 answers)
Closed 9 months ago.
I'm trying to make my footer responsive when screen size changes. Javascript works but its only when the page has been loaded. I dont know if there's way i can use html and css only......
var reswidth = window.screen.width;
var mql = window.matchMedia("screen and (max-width: 765px)");
if(reswidth < 756){
console.log(document.getElementById('logon-footer').children[0].setAttribute('style','position: static'));
} else if(mql.matches){
alert("Window is 800px or wider");
}
``
you can do that using The #media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries is a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (media type: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<h1>The #media Rule</h1>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "light blue", otherwise it is "yellow".</p>
</body>
</html>
Related
I want to make my styles responsive to the opening of the bookmarks bar in the browser.
I have a media query watching the height of the screen.
When I drag the screen manually (reducing its height) the media query works as expected.
However, when I open the bookmarks bar, the viewport shrinks (past the point where it should trigger the media query, as per Chrome DevTools) but nothing happens.
1.) Why might this be?
2.) Is there a best practice for dealing with the bookmarks bar changing the size of the viewport?
Update:
This is not a duplicate of this question.
That question asks if 100vh takes into account the bookmarks bar. I am asking why my media query does not respond to the bookmark bar changing the pixel height of the viewport.
Another update:
Link to example is here: https://n7m58rjj84.codesandbox.io/
Open in new tab, resize your window up and down and media queries work fine.
Try opening and closing bookmarks bar, and nothing happens.
Relevant code:
E.g. between small and medium breakpoints:
`#media (min-height: 720px) and (max-height: 760px) { ... }`
Using this simple code and switching the bookmark display on and off:
<html>
<head>
<style>
body {
background: #0f0;
}
#media (min-height: 720px) and (max-height: 760px) {
body {
background: #f00;
}
}
</style>
</head>
</html>
It works fine
tested in Chrome 72.0.3626.119
tested in Firefow 65.0.2 (with personal menu bar)
Make sure your tests includes the fact that you need to stay in this 40px range while modifying the viewport's height (760 - 720) otherwize the media query won't be tiggered
I am looking for a technique that will allow me to apply a certain CSS only if the current device (where my web-app runs) has a "small" screen – smaller than, say, 5 inches.
Some notes to make my question more clear:
It should not be based on screen resolution or density, because there are some tablets that have a small resolution and some smartphones that have a high resolution.
It also should not depend on current browser's window size. If it's a desktop then the CSS should not be applied even if the window was made small.
My web-app has two layouts. One is default and is optimized for desktops and tablets. Another layout is optimized for smartphones and should only be turned on on smartphones.
In my case nothing can be done on server-side. Different domains for each variant are not an option.
Thank you in advance!
Update
Here is a test page with my best try: http://jsbin.com/uXULOpe/2/
For Samsung Galaxy Nexus i9250 (4,5" sreen) it enables wrong style (".pad")... For iPad and WindowsPhone it seems to be working. Android seems to be thinking that it's width is at least 8 inches.
Source:
<!DOCTYPE html>
<html>
<head>
<title>M-Q test</title>
<style>
.always,
.desktop,
.pad,
.smart{
display: none;
}
.always{
display: inline-block;
}
#media only screen and (min-device-width : 10in) {
.desktop{
display: inline-block;
}
}
#media only screen and (min-device-width : 5in) and (max-device-width : 10in) {
.pad{
display: inline-block;
}
}
#media only screen and (max-device-width : 5in) {
.smart{
display: inline-block;
}
}
</style>
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, maximum-scale=1.0; user-scalable=0;"/>
<meta name="HandheldFriendly" content="true" />
</head>
<body>
<ul>
<li>Always: <span class="always">x</span></li>
<li>Desktop: <span class="desktop">x</span></li>
<li>Pad: <span class="pad">x</span></li>
<li>Smartphone: <span class="smart">x</span></li>
</ul>
</body>
</html>
To use two Templates/Models/Propertys:
//controll the browser size and set Propertys
if( body.offsetWidth < 400 ){ /* Small Sized Propertys */ }
if( body.offsetWidth >= 400 ){ /* Big Sized Propertys */ }
To set sizes dynamic, use jQuery:
//this starts on every browser resize interaction
$( window ).resize(function() {
if( body.offsetWidth < 400 ){ /* Small Sized Propertys */ }
if( body.offsetWidth >= 400 ){ /* Big Sized Propertys */ }
});
But you need to include the jQuery Script in your Head. Its a big Framework.
I've been tasked with making a web application more mobile-friendly. I'm running the app through PhoneGap to get the mobile build, but testing its appearance beforehand using the Ripple Emulator.
PhoneGap works pretty well on the app, but there's a kind of "control panel" whose width does not change, and it makes it so that this control panel takes up the majority of the width of the mobile view, which is no good.
So essentially, I need to edit the current JavaScript file so that it detects whether the viewer is a mobile device, and adjust the width of this control panel element accordingly. Unfortunately, I am basically brand new to all web development..
So as a general question, how would I go about doing this? I think I need to make these adjustments before the page is actually loaded, but I'm not sure of where in the JS file this would happen. The client is using JQuery Mobile and a few other libraries. The original developer is already using the
<meta name="viewport" content="width=device-width, initial-scale=1" />
tag, but it has no effect on this control panel section, and the width of the control panel's elements are hard-coded in.
This is a pretty vague question, but I'd appreciate any tips or guidance.
You may want to check out "responsive" design. Specifically, I've really liked Bootstrap's implementation. It is all CSS controlled and is based on the viewport pixel width.
You can create responsive CSS by using the following "#media" css code:
#media (max-width: 240px) {
/* really tiny screens */
}
#media (min-width: 241px) and (max-width: 319px) {
/* a little bit bigger screens */
}
#media (min-width: 320px) and (max-width: 767px) {
/* Basically up to, but not including an iPad */
}
#media (min-width: 768px) {
/* iPad and bigger */
}
Inside each #media tag, you can place your custom CSS for each size, so at 240px, you might have a title class with a font size of 16px:
#media (max-width: 240px) {
/* really tiny screens */
.title {
font-size: 16px;
}
}
Then rinse and repeat to change the font sizes for each subsequent viewport size.
Use orientation specific CSS such as:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Set the viewports setting to the devices max width and take care of the actual width of the content using CSS:
<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />
In this case, I'd recommend using Media Queries.
#media (min-width: X) and (max-width: Y) {
/* CSS rules for screens of width between X and Y. */
}
I've problem with my css sheet of one page ,So been thinking to detect screen resolution if equal or less than 800 pixel width it will makes my css code is
<style>
body {width:1004px;}
</style>
but if it was greater than 800 pixel width, it will makes my css code is
<style>
body {width:100%;}
</style>
so anyone knows js code that code do it !!
i only care about width detection no need to detect the hights as well.
i've made search for alot of js code doing this but wasn't able to use to do this exact function of passing either of those css code into the page.
You can use CSS Media Queries
body {
width:100%;
}
#media all and (max-width: 800px) {
body {
width:1004px;
}
}
For example if I have two sets of images for my website, one set is low resolution,
another set is high resolution, I to show the low res to the screen size like 1280 width users, and the others are high res images, how can I do that?
Using javascript? or any other method ? possible to define in css or html?
You can use CSS media queries for that. More about media queries here.
Example:
/* This block applies to all "screen" devices
*/
#media screen {
.some-content {
background-image: url(largeimage.jpg);
}
}
/* This media query applies only to "screen" devices with
a maximum width of 1279px (e.g., < 1280)
*/
#media screen and (max-width: 1279px) {
/* Use `mediumimage.jpg` on these devices instead of the above */
.some-content {
background-image: url(mediumimage.jpg);
}
}
/* This media query applies only to "screen" devices with
a maximum width of 639px (e.g., < 640)
*/
#media screen and (max-width: 639px) {
/* Use `smallimage.jpg` on these devices instead of the above */
.some-content {
background-image: url(smallimage.jpg);
}
}
Note the descending order of the above: First we specify for the largest device, then smaller ones, then smaller ones, so that latter queries override earlier ones (since a device with a screen of, say, 1024 pixels will match both of the first two rules).
you can design it with something like
body {width: 100%; height: 100%; position:relative;}
you will face this problem for browser compatibility.
define it in your css you can have any class you wish . i have done it for my website and you can have the same image working for you.