I have different views on portrait and landscape
/* portrait ----------- */
#media only screen
and (max-width : 320px) {
body{
padding:20px;
}
}
/* landscape----------- */
#media only screen
and (min-width : 321px) {
body
{
padding:60px;
}
}
/* webpage----------- */
body
{
padding:0px;
}
however, landscape css effects on webpage view. how do I spilt webpage up?
I tried to make another media query on webpage, but it didnt work.
also I tried (min-device-width : 321px) for devices only, but it doesnt work
As explained in this article, the media query spec includes orientation detection. It should look something like this:
#media screen and (orientation:landscape) and (min-width:321px) {
foo {
padding:60px;
}
}
#media screen and (orientation:portrait) and (max-width:320px) {
foo {
padding:20px;
}
}
And so on.
Related
CSS newby here...
I'm looking at a responsive framework and imagining how I would accomplish different tasks.
Based on the size of the screen, they have classes added to the body tag such as:
.PhoneVisible, .DesktopVisible, etc...
They also have classes to make links into buttons :
.btn, small-button, med-button, large-button
I'm puzzled on how you would go about changing your CSS. I.E. something like:
<a href="#" class="MyButtonOptions">XXXX</>
.PhoneVisible .MyButtonOptions { btn small-button }
.TabletVisible .MyButtonOptions { btn med-button }
.DesktopVisible .MyButtonOptions { btn large-button }
Do you have to set the varying options individually?
i.e. .PhoneVisible .MyButtonOptions { height:30px; } ?
All advice appreciated!
CSS Media Queries are definetly the way to go.
You can easily separate your CSS based upon the browser size, pixel density, etc.
Here's a list of examples from CSS-Tricks.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Take a look at this https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.
Another way is to attach the resize event some piece of "switch code".
Something like this: http://jsfiddle.net/s5dvb/
HTML
<div id="body" class="limit400">
<h1>Hey :D</h1>
</div>
CSS
.limit400 h1 { font-size:10px; }
.limit1200 h1 { font-size:50px; }
JS
$(window).on('resize', function() {
if($(window).height() > 400) {
$('#body').addClass('limit1200');
$('#body').removeClass('limit400');
}else{
$('#body').addClass('limit400');
$('#body').removeClass('limit1200');
}
})
About the frameworks, try http://purecss.io/ or http://getbootstrap.com/
Hope it helps.
Like Nej Kutcharian posted, you can use the above approach and just to relate it back to the class scenario. Rather than switching class you use the same class and change the styling it applies depending on the size of the screen.
As shown below, any element with the class "adjust-me-based-on-size" will have a margin-left and margin-right with differing values depending on the media size, so default is 15% but if the screen is between 800 and 1200 (px) it will have 10% instead and less 800px will have no right margin and a left margin of 5%.
.adjust-me-based-on-size{
margin-left: 15%;
margin-right: 15%;
}
#media only screen and (min-width: 800) and (max-width: 1200) {
.adjust-me-based-on-size {
margin-left: 10%;
margin-right: 10%;
}
}
#media only screen and (max-width: 800px) {
.adjust-me-based-on-size {
margin-left: 5%;
margin-right: 0%;
}
}
i want to design a web site.but tell me what are the sizes i can use for responsive website design.
that sizes must contain for mobile,tablets,pcs and other devices..
i want to use them in media queries.. :D
EX for Mobile:
#media only screen and (min-width: 500px) {
}
EX for Tablet:
#media only screen and (min-width: 800px) {
}
Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D
like that i want to know what are the reals sizes for these devices that i can use. :D
/* #1- Desktops */
#media (min-width: 980px) { ... }
/* #2- Portrait tablet to landscape and netbooks */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* #3- Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* #4- Landscape phones and down */
#media (max-width: 480px) { ... }
For actual device specifications, check out this link by CSS-tricks..
Here is the full list of media breakpoints
#media all and (max-width: 1690px) { ...}
#media all and (max-width: 1280px) { ...}
#media all and (max-width: 980px) { ... }
#media all and (max-width: 736px) { ... }
#media all and (max-width: 480px) { ... }
Check out for more informations about responsive device sizes : Medium
I hope so it's will help.
Ive made a website that renders fine in all browsers, but when viewed on a phone or tablet the body font whose weight is font-weight: 100; just comes out to fine.
Is there a way i can write a css conditonal to target mobiles and tablets, similar to the IE conditional ?
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
You should use media queries: http://www.w3.org/TR/css3-mediaqueries/
Examples (Quoted from Bootstrap's site):
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
OP,
Within your CSS you can do media queries to conditionally hide/show/modify elements based on the size of the screen that is viewing them.
CSS
#media (min-width: 1200px) {
/* Large desktop */
}
#media (min-width: 768px) and (max-width: 979px) {
/* Portrait tablet to landscape and desktop */
}
#media (max-width: 767px) {
/* Landscape phone to portrait tablet */
}
#media (max-width: 480px) {
/* Landscape phones and down */
}
Via Twitter Bootstrap Docs on responsive design. Hope this helps.
There are no conditional comments for mobile devices because they should operate exactly the same as desktop browsers. (What I think is a mess by the way. Responsive design is good, but not a solution for everything)
I need to findout and apply tablet width from css with css expression.
I have a div content. it should apply width 100% in portrait mode and When i turn to landscape the div should change the width to half of the tablet device width(tablet width/2). How to apply this expression method in css?
I'd try to steer clear of expressions, as they are limited to Internet Explorer 5,6 and 7 (what tablets runs this??), and they slow things down considerably (performance wise). Anyway, try this:
#media screen and (orientation:portrait) {
/* Portrait styles */
}
#media screen and (orientation:landscape) {
.element {
width:expression(document.body.clientWidth / 2);
}
}
You can also try more specifics - these would be considered as hacks (thanks to TheBlackBenzKid for suggesting it):
/* Windows 7 Phone - WP7 */
#media only screen and (max-device-width: 480px) and (orientation:portrait) {
}
#media only screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* Apple iPhone */
#media only screen and (max-device-width: 320px) and (orientation:portrait) {
}
#media only screen and (max-device-width: 320px) and (orientation:landscape) {
}
If not using expressions, (e.g. to target other browsers and .. well, tablets) you can use a small javascript to detect the orientation, and then add a class to the element:
html:
<body onorientationchange="updateOrientation();">
Javascript:
function updateOrientation() {
if(window.innerWidth> window.innerHeight){
//we are in landscape mode, add the 'LandscapeClass' class to the element
document.getElementById("element").className += " LandscapeClass";
} else {
//we are in portrait mode, remove the class
document.getElementById("element").className =
document.getElementById("element").className.replace
( /(?:^|\s)LandscapeClass(?!\S)/ , '' );
}
If using jQuery, you could try this, to modify the element's (inline) CSS directly:
function updateOrientation() {
var $width;
if(window.innerWidth> window.innerHeight){
$width = window.innerWidth/2;
} else {
$width = '100%';
}
$(".element").css({width:$width});
}
I have not tested any of this, but I think it will work
Is this possible? It seems like a neat solution to me, but I'm not sure if it will work.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Code for both portrait and landscape */
#media (orientation:portrait) {
/* Code for just portrait */
}
#media (orientation:landscape) {
/* Code for just landscape */
}
}
You should be able to nest #media rules this way in CSS3, but it isn't yet supported by most browsers. See this answer for details.
You would have to fully expand and repeat the top-level media queries for the inner rules for it to work across browsers (and I imagine the SCSS processor would generate something similar):
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Code for both portrait and landscape */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
/* Code for just portrait */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
/* Code for just landscape */
}
If you wanted to do this the best way is to use the high level media query in a link tag, and then the other queries inside the linked sheet.
In practice though most people cascade their CSS rules from a base sheet that covers the common stuff and then putting changes to that in each media rule-set.
I think not possible but you can write this format If you are using SASS css pre-processor.
example , you can copy this code and paste to https://www.sassmeister.com/ -and watch the output
SASS
#media only screen and (max-width: 767px) {
body{
color:red;
}
#media (orientation:portrait) {
body{
color:green;
}
}
#media (orientation:landscape) {
body{
color:orange;
}
}
}
Output CSS
#media only screen and (max-width: 767px) {
body {
color: red;
}
}
#media only screen and (max-width: 767px) and (orientation: portrait) {
body {
color: green;
}
}
#media only screen and (max-width: 767px) and (orientation: landscape) {
body {
color: orange;
}
}