Enter your contact information.
Enter your project information.
Step 3Choose the PHP programmers you want to hire.
Compare Free PHP Quotes
Adapt.js Offers JavaScript Alternative to CSS Media Queries
*Attention PHP Programmers* - Add A Free Listing! Get more clients.
With the mobile web comes a new set of design problems: how do you fit your content on a much smaller screen, and, more generally, how do you make your site look good no matter what size screen it’s on? The growing consensus is that Responsive Web Design — websites that adapt to the size of the user’s screen — is the way forward.
For many developers that means using @media queries to selectively target the device screen size and orientation through CSS.
While the @media approach is a good one, it won’t work for every site. That’s why Nathan Smith, creator of the 960 Grid System, has released Adapt.js, a lightweight JavaScript library (894 bytes minified) that allows you to specify a list of stylesheets and the screen sizes for which they should be loaded. Essentially Adapt.js does the work of @media, but will work in any browser, even those that don’t understand @media.
All you need to do is include Adapt.js in your pages and then define the sizes and stylesheets to go with them. Here’s the code from Smith’s example:
var ADAPT_CONFIG = {
// Where is your CSS?
path: 'assets/css/',
// First range entry is the minimum.
// Last range entry is the maximum.
// Should have at least one "to" range.
range: [
'760px = mobile.css',
'760px to 980px = 720.css',
'980px to 1280px = 960.css',
'1280px to 1600px = 1200.css',
'1600px to 1920px = 1560.css',
'1920px = fluid.css'
]
};
While using JavaScript to load CSS might seem a bit strange, even if you use @media queries you’re still going to need some kind of polyfill (usually JavaScript-based) to handle those browsers that don’t know what to do with @media rules.
Of course Adapt.js isn’t right for every situation. Smith has a very nice take on the debate over @media, JavaScript, separate mobile websites and other options for dealing with the small screen:
As with any field in which technological methods are open for debate, there is the danger of religious fanaticism, where we each rally behind a respective technique and defend it vehemently. I would advise you to consider your audience, weigh the options, and find an approach that makes sense for that particular context.
See Also:
- Start Small, Build Big With ‘320 and Up’
- How to Have Your @Media Queries and Eat IE Too
- Make a Big Splash on Tiny Screens With Media Queries
Tue, 19 Apr 2011 15:36:19 GMT
Tags: @media, CSS, JavaScript,
*Attention PHP Programmers* - Add A Free Listing! Get more clients.
@media
CSS
The Future of CSS: Finally, Sane Layout Tools
Woolly, the CSS sheep. HTML5 and CSS 3 offer web designers new semantic tags, fancy animations, server-side fonts and much more, but that’s not the end of the story. The next major development in web design will likely revolve around one of the thi
Quickly Create CSS 3 Animations with ‘Ceaser’
CSS 3 has some awesome new animation capabilities for web developers — rotating objects, fading them in and out and more — but writing the code is a bit more complicated than most CSS rules. To make your animating job a bit easier, developer M
Simplify Your Stylesheets With CSSPrefixer
Woolly, the CSS sheep. CSS 3 has some awesome new features, like 3D transforms, smooth transitions, border images and gradients. Since most browsers already support these features there’s no reason you can’t use them today, provided you grac
JavaScript
JavaScript Fade Tutorial – Fading Elements In/Out
One of the most common JavaScript effects is fading elements and text in and out. Fortunately, it isn't very difficult to script and doesn't require a JavaScript framework.
JavaScript Slider – TinySlider 2
This full-featured and standalone JavaScript slider is easily configurable and visually customizable using CSS. It also clocks in at a tiny 3KB.
Simple AJAX Function with Example
TinyAjax is a simple AJAX function that makes it easy to call and process GET and POST transactions. Check out the example.
Professional website development and design, e-commerce solutions, specializing in the LAMP stack.
San Fernando Valley, California US
Creating unique design solutions that are both affordable and inspiring. Specializing in design, layout & production of printed materials, logos & illustrations.
Rocky River, Ohio US
tattoo shop
Athens, Attica GR
We at I-Soft Solutions provide other web services which include Customized Static Web Design, Dynamic Web Development in PHP Mysql, Web Hosting, Domain Name Registrations, Website Maintains Etc.
Navi Mumbai, Maharashtra IN
Opera Dragonfly a Worthy Addition Your Web Development Toolkit
Opera Software has released the first official version of Dragonfly, the company’s web develop
Chrome for Android Doesn’t Need No Stinking Mobile Websites
The latest version of Google's Chrome web browser gives Android fans an easy way to skip mobile webs
This Week In Web – Python, NodeJS CMS, Google APIs, XDebug
Writing Clean, Testable, High Quality Code in Python
Noah Gift, Python book author and A
Telefónica Working With Mozilla to Build Open Web-Centric Smartphone
Mozilla's Boot2Gecko project gets a shot in the arm from a new partnership with mobile provider Tele
JavaScript WYSIWYG Editor – TinyEditor
TinyEditor is a simple JavaScript WYSIWYG editor that is both lightweight (8KB) and standalone. It c
Article Tags
PHP Programmers Articles
Live Help Chat Software
Web Design Quote
Web Design