Hello There, Guest! Login Register

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
a little bit of experience for Responsive Web Design
Very early in the A List Apart to see the response to web design (hereinafter referred to RWD), but until this spring began to try to use. Do this with the technology for six months now, I feel a little bit to understand. In this sort of experience, be summed up and start a bar.

1, the sooner the introduction of RWD the better
I have introduced RWD in my 3 sites, and the situation and the results are:
1) Http://dingyu.me - there is no mobile version, then the introduction of RWD, the workload, the need to adjust some HTML
2) http://catalog.im - a separate mobile version, after the change to the mobile version of RWD, heavy workload, some part of the design to adjust and modify the HTML
3) https://getqujing.com - start to consider the design RWD, the workload of small, finished version of the CSS version of the mobile version of the very natural complement

So if the site design and coding at the beginning of the time to consider RWD, then the back of the work will be more relaxed, and CSS better organization and management.

2, debugging tools
Opera Mobile Emulator + Opera Dragonfly is the perfect match for debugging RWD. The former comes with a lot of mobile device description file, you can directly create a device simulator out; the latter can be remotely connected to the simulator, and then we are familiar with the Inspector panel debugging. Screenshots are as follows:


Opera Mobile Emulator also has a strange place, that is, it does not have built-in iOS device description file. Taking into account the fact that iOS dominated the mobile Internet, this design is quite strange.

Also heard that iOS 6 can also be remotely debugged, but I do not currently have iOS 6 device -_-!

3, simplified media query wording
(Max-device-width: 480px) and (orientation: portrait), right? You do not want to write everywhere in the CSS @media only screen and (orientation-portrait-width = 320px) Fortunately, in the 3.2 release of SASS, you can use the new @content definition mixins, such as my definition is this:

/ * IPhone 2G, 3G, 3GS, 4, 4S, 5 Portrait * /
@mixin iphone_portrait {
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
@include iphone_base (320px);

/ * IPhone 2G, 3G, 3GS, 4, 4S Landscape * /
@mixin iphone_4s_landscape {
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
@include iphone_base (480px);

/ * IPhone 5 Landscape * /
@mixin iphone_5_landscape {

With these basic definitions, you can do this in business-related CSS:

@include iphone_portrait {
H3 {
Display: none;

Equal to the transmission of a block to a good mixin, very handsome! As for the mixin called iphone_base () above, that's another mixin I've defined that contains the basic CSS for iPhone.

Oh, if you are still handmade CSS, it is strongly recommended that you try SASS.

4, RWD related CSS organization and management
RWD at this stage more trouble, media query is very difficult to manage scattered, and looks like the industry is not particularly good on this approach.

My approach is to put each device-specific CSS together, that is, manage the code by device rather than style. The advantage of this is that the code is not so scattered, the management of the media query (precisely the kind of pre-defined mixin management) is equal to the management of the equipment.

In addition, I put commonly used mixin in a CSS file, so that in each project, as long as the introduction of this file, you can use these shared code. This is a relatively common practice, I am slightly different here, I use the Ruby Gem to manage the basic style (https://github.com/felixding/japmag), including basic CSS, Javascript, site layout and the commonly used Kind of template files, etc., of course, this is not just RWD.

In short, the use of SASS mixin, can greatly make people from the management media query freed. The following is the code snippet of https://getqujing.com, you can see the support of the iPhone has become very simple, the basic settings (such as page width, padding, fonts and spacing, etc.) have been transferred by iphone_portrait tune Of the iphone_base (320px) do a good job, write business-related code on a lot easier:

/ * IPhone 2G, 3G, 3GS, 4, 4S, 5 Portrait * /
@include iphone_portrait {
@include page_plans;

.Page .My {
.my-navigation {
Display: none;

H2 {
Padding: 0 0 0 25px;
Background-repeat: no-repeat;
Background-position: left 5px;
@include page_my;

Forum Jump:

Users browsing this thread:
1 Guest(s)