Say I have an existing CSS for desktop (desktop.css). I want to include iPad Safari css.
In desktop.css, can we just do a condtional import at the end..
#media only screen and (device-width : 768px)
{
#import "ipad.css"
}
In ipad.css, we will have only iPad relevant styles..
/* iPad Styles */
i.e. if it is an iPad user, the ipad.css would get imported, else it would be ignored.
What is the best approach?
In desktop.css, can we just do a condtional import at the end..
Actually, no, #imports have to come before any other style declarations.
But in your case, if you import your iPad styles at the beginning they'll probably all get overridden by your desktop styles. So you're better off using another <link> element with that media query and pointing to your ipad.css instead:
<link rel="stylesheet" media="only screen and (device-width: 768px)" href="ipad.css">
Related
I have an existing Ruby on Rails 4 application and I have set up bootstrap within. The buttons, forms and other small things I've utilised have been great!
Now I am absolutely perplexed when it comes to bootstrap and responsive design. From what I've read, embedding bootstrap into your app should be responsive out of the box, but this doesn't seem to be the case (or maybe I'm doing it wrong).
In my application.html.erb head tag I have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I've looked at this section on the bootstrap site, but I don't see how adding hidden/visible classes is going to help my case, especially when header/footer widths need to change when the browser gets smaller.
I've been doing stuff like this so far:
#media only screen and (min-width : 175px) and (max-width : 400px) {
/* styles here for 175px to 400px */
}
So what I've been doing is setting up my own media queries. Now my question is: IS setting up media queries necessary when using the bootstrap framework? I've had some OK success so far using my own queries, but it's very, very tedious: everything on my site looks pretty good when the browser is large, but when it gets small, everything goes to shit.
If anyone could offer some insight on this, it would be much appreciated. I feel like I'm making responsive design much harder than it ought to be.
Integrate bootstrap into your app does not mean your website become responsive. It depends on the elements and classes that you are using on your site. If you have lots of custom CSS classes then you will need to define your own #media query.
In this case, I think you should take a deeper look into your app to see if you are really using Bootstrap classes in all places. If you see strange behaviors on mobile devices, then it should be because of your custom CSS classes
If you look into bootstraps documentation, bootstrap 3 has a lot of css features which will help you to make your app responsive.
Grid System:
Bootstrap 3 provides you grid classes according to your device like: col-md-1(for medium size desktop), col-sm-1(for your tablet) ,col-xs-1(for your mobile) so if you want to resize a particular element according to your device you can give that element classes like:
<div class="col-md-8 col-sm-4 col-xs-2"></div>
Now this div will have different width depending on the device width.
Media Queries:
Bootstrap 3 use the following media queries in our Less files to create the key breakpoints in grid system.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Media queries will be helpful if you want to change typography or want to override any style according to device
Images:
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Responsive Utilities
For faster mobile-friendly development, use these utility classes like .visible-xs, .visible-sm etc for showing and hiding content by device. You can simply apply these classes to any element and they will be visible or hidden according to your device
I changed this site over to html5 using the html5 boilerplate. Everything looks fine when viewed on a desktop or even an ipad but when I view it on my iphone it zooms in only showing the contents of my .wrapper div. I've tried removing the
as many have suggested. I also tried adding maximum-scale-1.0, initial-scale=1.0, and minimum-scale=1.0 and none of these or combinations of them have solved the problem. I also tried setting my body and html tags to width:100% with no luck. I can't seem to figure out what the problem is and if it's a css or meta tag problem. The site is located at www.sweetestgourmet.com.
Try adding this to <head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
use css3 media queries
include meta tag as show in the head tag
then in stylesheet taget iphone as
#media only screen and (max-width: 480px){
/* write your css */
}
here is tutorial http://css-tricks.com/css-media-queries/
I am looking at using CSS Media Query to support multiple tablets (Android/iPad). Below is the Media Query which I have;
<link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="css/tablet.css">
<link rel="stylesheet" media="only screen and (min-device-width:1024px)" href="css/desktop.css">
Now my assumption is most tablets are below 1024px width. Please correct me on this front. Any tabular comparision would be great.
Also any other approaches besides device-width for media query would be fine.
I am looking at a generic way of designing my pages which would work for both desktop/tablet browsers...present and future (and may be even mobile). I am using fluid design (or called responsive design) for the same (everything in %...width/height/padding/margin all in %)
Bear in mind that a device such as an iPad can be used in both portrait and landscape orientations, so I would use the following media query:
#media only screen and (min-device-width: 768px) and (max-device-width: 1280px) {
/* .touch class from Modernizr */
.touch .element {color: #fff;}
}
Or if you'd like to keep the styles in their own document:
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width:1024px)" href="css/tablet.css">
Note: You could generally detect tablets by combining media queries with a feature detection library like Modernizr.
When we make iPad specific website ( I'm making different website for desktop users) and we also want to write different CSS for Portrait and landscape mode, what method you would prefer?
First method
We can keep single CSS file with only one http request
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
and use media queries inside to keep the code separate
/* CSS for landscape here */
#wrapper {width:1024px}
/* CSS for portrait here */
#media only screen and (orientation:portrait){
#wrapper {width:768px}
}
Second method
We could use 2 CSS files with 2 http request
<!--CSS for landscape-->
<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">
<!--CSS for portrait-->
<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
Which method you would prefer and and if you have any suggestion to improve please tell.
Note: I'm making separate website for Tablets, it's not for Desktop and Mobile
Edit 2: *In first method is it better to specify Landscape too or it's not necessary.*
Compare this with first method code
/* CSS for landscape here */
#media only screen and (orientation:landscape){
#wrapper {width:1024}
}
/* CSS for portrait here */
#media only screen and (orientation:portrait){
#wrapper {width:768px}
}
and Is it ok to remove style="text/css" from css link?
<link href="style.css" rel="stylesheet" media="all" />
And should I keep media="all" in link or it's not necessary?
I would prefer the first one because the whole CSS gets cached on the first request. With the second one, the CSS for the other mode will need to be downloaded so the screen orientation change will not be as smooth as with the first one.
I prefer the first method myself because I like having everything in one place. As for the necessity of style="text/css", you don't need to have it, at least with the HTML5 doctype, but I think it remains as a best practice thing. The same goes for media="all".
I want to print the header logo on print page which is not present on screen displayed.
Please suggest, How can I do this?
Thanks!
Assuming we're talking about HTML/CSS, you can have custom CSS for some media types, like:
<link rel="stylesheet" type="text/css" href="sample.css" media="print" />
or, inline:
#media print
{
p.test {font-family:times,serif;font-size:10px;}
}
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
This should allow you to accomplish what you need.
You would use a print stylesheet.
In your normal stylesheet you would set the logo to display: none; and in the print stylesheet you would set it to display: block;.
This would hide it on screen and display it at print time.
Note: That if you have used a <div> with the background set to your logo in the main site design this wont work. Browsers dont print the backgrounds (to save ink) so it wouldnt be visible. You would need to add in a proper <img> tag and apply the method mentioned above.
Check this out for a pretty much definitive introduction to print stylesheets:
http://www.alistapart.com/articles/goingtoprint/