Responsive layout can-take-all pc and mobile sides?
Can not. From the layout is: PC and mobile sides general layout and display the difference is huge . From the event response is: pc end of the main event is the mouse, and mobile terminal is touch, tap, swipe and other events. Incident response mechanism both completely different . Just these two points was enough for pc and mobile sides as two independent projects, or even to hang a page on a different domain name. For example, Tencent video, beep beep miles miles, where the domain name to the pc network are: v.qq.com, www.bilibili.com, www.qunar.com. They are the corresponding mobile station 3g.v.qq.com, m.bilibili.com, touch.qunar.com.
Therefore, this approach is generally: end of the pc as a main program, upon entering the pc project page browser detection the navigator.userAgent , if the result is a mobile terminal, the home page to jump to the movable end projects. Otherwise, continue to browse normally pc side project home page.
The core ideas:
In discussing responsive layout, we first need to understand this one thing: the purpose is not to make a responsive layout of a page layout proportions show was exactly the same in any equipment, but to each page in the device can be normal and relatively comfortably display , does not affect the user's reading experience. In other words, the first task is to read the user does not affect the normal operation and normal, and the spacing ratio between the contents of some of the more minor sides of the blank, such as a large background area, the navigation key, can make the appropriate adjustments.
Why not do the full sense of geometric scaling it? This is because if the average PC terminal design draft (1920 * 1080), based on doing geometric scaling, in the small screen in all text, icons, etc. will become very small, difficult to read and operate.
So, in 1366 * 768 and 1920 * 1080 in response to two page layout of their size a button, a certain text font size, may be exactly the same. This is not surprising.
Dependence means:
目前业内主要有两种技术，一种是依靠js去动态地给元素赋予类名，这显然不科学。另一种也是大多数响应式页面会采用的一种技术，则是媒体查询（media query）。媒体查询的优势除了能将样式的工作完全交给CSS来做以外，它还有一个十分优秀的特性：替换性。和覆盖性不同，当你需要在不同设备更改样式代码时，只更改需要更改的那一小部分就可以了，其他的CSS样式将继承下来。
基本手法：
以1920*1080的设计稿起步，对内容区设置一个定宽的容器，一般是1000px~1400px;令其水平居中（margin:0 auto）。当设备的宽度接近最初定宽时，则将容器的width稍微减小一些。同时容器里面的部分子元素的宽高也做适当的缩小（或者数量做适当的缩减），一直到设备能在1024*768，也就是业界普遍认为的最小电脑端设备正常显示时，就不再继续缩小。此时这个最终容器定宽（约为1000px左右）就是容器的最小宽度（min-width）。
大型网站示例：
1.哔哩哔哩
实现思路：内容容器（bili-wrapper）初始宽度为1160px,水平居中。在页面宽度为1400px时，内容容器宽度缩为980px;
2.腾讯视频
直接把body作为内容容器，借助媒体查询在不同的屏幕宽度下做相应调整，最小的body宽度为1030px;
3.去哪儿网
去哪儿网的q_page，借助媒体查询，最小容器宽度为980px，水平居中。
类似的大型网站数不胜数，@media是一个绕不开的话题，也是目前业界最流行的一种手段。