I am going to make a website that is using responsive design. I read some information about css media query. What I wanna do is that the layout of my webpage should looks difference by using different devices (like PC, tablets or smartphones).
If I use media query to determine the device by using the width of the screen (in pixel), I always worry about if there will be a new device using a extremely high ppi screen. That device may threat as tablet or something like PC?
Another solution that is using the user agent to determine the device category by using userAgent. There's also a problem is that if the device not interpret the javascript fine then the page maybe broken.
Any great solution that can solve my worries above? Or Which solution is better?
Or I misunderstand the method of using media query?
Thank you.
CSS is the way to go, and you can always provide fallback for browsers that don't support media queries using a js plugin like css3mediaqueries.js, but relying on JS solely to make your website responsive is a risk because you can't tell for sure if the user will have Javascript enabled, and when it's not enabled it's not going to be responsive anymore.
Also, it's considered best practice now to use em values for media queries instead of pixels to make sure your website always scales right. More on this topic in this article.
Another tip is that you determine the media query values according to your content's best break points instead of device dimensions, that way you also make sure your content will always look right no matter how many new devices are made.
Hope that helped :)
id' personally use CSS and set min-width and max-width. Most responsive designs now days use CSS. This way if there is a new device on the market it will just adjust according to it's screen size.
#media screen and (max-width:480px) { }
#media screen and (min-width:481px) { ) etc... etccc....
I prefer use media queries in CSS.
Just write the queries after the default CSS...
#media screen and (max-width: 600px) { write here only the elements that must change de code for responsive performance }
.logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}
#media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}
Don't forget to insert the viewport code into the head/HTML.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
I prefer Twtitter Bootstrap over using CSS3 media queries for such various devices.
Try jRWD, a JavaScript-only module I designed recently. It uses 12 lines of pure JavaScript and 2 small helper functions. It's available on GitHub, at https://github.com/BlackMagic/jRWD.
If you want to see jRWD in action, visit http://ieee-qld.org. Make sure you inspect the source code. Minimal JavaScript, minimal CSS stylesheet. No jQuery either.
Related
I have a little question for all of you !
I will try to apply mobile stylesheet only if the user is on a mobile.
If the user is on desktop only the desktop's stylesheet will be apply even after resizing the window.
Here is the result I'm looking :
• enter link description here
When you resize your windows the mobile's stylesheet is not apply because you are on a desktop version
easy or not ? Help me please
Thank's a lot
you are gonna need some javascript to detect the browser, even then it's still a difficult task to accomplish 100% of the time since there's always new browsers out there, one of the most up to date librearies is bowser. https://github.com/ded/bowser
You ca use css media queries
For example
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
For example the above style will be applied only when the max-width is less than or equal to 500
I have made a terrible error. I have built an entire website without making it responsive. Is there any quick easy way to make the whole site responsive so when in landscape mode it all looks exactly like my website on a desktop computer? I am a designer for print but not great with websites as you can see but I really do not want to start the whole site again.
Maybe a media query to with ratios? so the whole site looks the same just smaller and fits on the screen?
Thanks in advance
Try using CSS #media Rule, and specify your styles accordingly.
You can look at plugins that help you do it. RestiveJS is an example.
http://restivejs.com
For the future: the easiest way to implement the #media rules is the usage of em instead of pixel.
http://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the
size of the current font)
if you then want your website to adjust to your screensize, simply use
#media all and (max-width: 768px) { // ipad width in portrait
body {font-size: 0.7em}
}
everything is 30% smaller on devices with a screen width smaller than 769px then if you used em instead of px
I use large images in most of my (Wordpress) posts. I'd like to optimize these for mobile users. I'm not sure what optimize means but I'm guessing CSS, jquery or JS switches out the larger image for a smaller one?
Are there any examples of how this should be done?
Jquery Bires will do exactly what you want.
https://github.com/ahoward/jquery.bires
I would use CSS Media Queries to serve different CSS based on screen size
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
For example
#media (max-width: 700px) { ... }
Would serve specific CSS to any device with screen below 700px
I want to make some of the fonts on my website larger, if a visitor is using a small screen. Ideally without jquery, as I want to do this early on in the page load, and I don't want to load jquery until later, for faster loading.
The best I have come up with, is to check for screen size. But this is far from perfect. An iphone4 has relatively large size, but small screen, while some old netbook might have a smaller resolution but a larger screen. I guess what I really want is some variant of screen "DPI".
If there is some css way of saying "on a small screen do this, else on a large screen do that" that would work too.
In CSS2 there's a media property and in CSS3 this can be used to do media queries. It's not supported on all browsers, but it may be okay to use since your small devices like iPhone etc do support it.
#media screen and (min-width: 781px) and (max-width: 840px) {
body {
font-size: 13px;
}
}
This site doesn't care about IE, try it in FF or Safari, change the browser width and notice how the width changes using this property.
Media Queries are the key and are a lot of fun to use.
See http://jsfiddle.net/neebz/kn7y3/ and change the width/height of the 'Result' panel to see it working.
Example taken from : http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/
I have noticed on some sites that utilise a fluid layout, it is possible to remove elements on the page and replace elements when the window is shrunk to a smaller size, obviously to make the content easier to view.
ex: http://simplebits.com/
My question is.. what css is being used to make this happen (if it is css, perhaps JavaScript..)? what should I look at in order to learn more about this technique?
Thanks!
The stylesheet contains different rules for when the screen is less than 800px wide. If you look at the stylesheet for the page the on line 983 there is a #media rule as follows:
#media screen and (max-width: 800px) {
/* Alternate rules here*/
}
This is a CSS3 feature so I guess that the site does not restyle as nicely for older browsers. Details of media queries can be seen at http://www.w3.org/TR/css3-mediaqueries/#width
It uses CSS Media Queries. Look at the end of the CSS file:
http://simplebits.com/-/css/styles.css
This type of design is more commonly known as "responsive" design, whereas "fluid" design is usually referred to as design that isn't fixed width.
You can use CSS media queries to produce designs like this.
An interesting article about this technique (which is called responsive design, as Jim pointed out):
http://www.alistapart.com/articles/responsive-web-design/