1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<h2>Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers</h2>
<div class="intro">
HeadJS will detect screen resolutions, features, browsers and automatically generate dynamic css/javascript classes that you can then target.
</div>
<div class="code-example" data-title="CSS / JavaScript">
<p>Often you will need to adapt your design or code logic depending on resolution, where the user is, or what browser he is using.</p>
{% highlight css %}
/* Only apply margin to IE < 6 */
.ie-lt6 {
margin: 10px;
}
/* Resize elements based on resolution */
.lt-800 .container {
width: 600px;
}
.gt-1024 .container {
width: 1000px;
}
/* Change style based on feature support */
.no-border-radius table {
border: 1px dashed black;
}
/* Change elements on individual pages thank's to the CSS Router */
.index-page .ads {
display: none;
}
/* Do something if the user is on a mobile device */
if (head.mobile) {
head.load("iscroll.js");
}
{% endhighlight %}
<p>
All feature detections are both accessible via css classes, and javascript properties.
</p>
<div style="width:100%;">
<div onclick="blog.loadComments(this, 'api/2.0.0/responsive', 'Leave a comment')" style="cursor: pointer;">
<h2>Show Comments</h2>
</div>
</div>
</div>
|
