Responsive css styles on mobile devices ONLY
What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.
There are media queries for common breakpoints , but with the ever changing range of devices they're not guaranteed to work moving forwards.
The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.
To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.
How to change the css style for phone and desktop?
Here are the media queries of standard devices (from CSS-Tricks.com):
/* 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 */
}
All of the areas that say /* Styles */ are where you would place the separate CSS components for the different devices you are supporting.
**PLEASE NOTE: this is a pretty convoluted media query sheet. I would normally delete the landscape stuff, and the iPhone media query takes care of most smartphones, so there's normally no need to have two separate ones for that. Here is what I usually use:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
(and from Creating a mobile web page with different css style)
Bootstrap Change css depending on mobile layout
Use media queries. Change width according to you device width. Put the class/Id/elements of the font container in the media curly braces.
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}}
Related Topics
Half Pixel in Border Width Size It Is Not Showing
Ems to Pixel Conversion - Why 62.5% and Not 6.25%
How to Tell Org-Mode to Embed My CSS File on HTML Export
How Is The Caret on Twitter Bootstrap Constructed
Remove or Add Class in Angular
How to Get a Custom Scroll in Firefox and Ie
Is Browser Prefix Still Required for Linear-Gradient
Regression Testing for Styling and Layout of Web Applications
Browser-Specific Prefixes with a CSS Transition on Transform
Input[Type='Text'] CSS Selector Does Not Apply to Default-Type Text Inputs
How to Use Pseudo Selectors in Material-Ui
Two Divs Inside Div. How to Auto-Fill The Space of Parent Div by Second Div
CSS Multiple Backgrounds Scrolling at Different Speeds
CSS Horizontal Navigation Spacing
Font Awesome Icons Are Not Working in Some Browsers