很久之前，我都在考虑这个问题，虽然至今也没有个完备的答案，但还是留下一些拙见和思考，以供日后解答，或是自娱自乐、谈笑自我的资本。
在我刚接触前端，学习到响应式的时候，有人给我这么的一个方法，
采用 less语法:
(ba.less)
.re(@width){
@xs : 100px/(750px/@width);
@media (max-width:(@width + 2px)){
html{
font-size:@xs;
}
}
}
.re(1440px);
.re(1280px);
.re(1024px);
.re(960px);
.re(950px);
.re(900px);
.re(800px);
.re(773px);
.re(768px);
.re(736px);
.re(732px);
.re(731px);
.re(667px);
.re(640px);
.re(600px);
.re(568px);
.re(533px);
.re(435px);
.re(414px);
.re(411px);
.re(384px);
.re(375px);
.re(360px);
.re(320px);
而用法则是，
直接 在另一个less文件
@import 'ba'; 引用基础文件
用到长度单位的时候，
比如说，100px ，则 写成 1rem，50px，则0.5rem，总之量到的px除以100再转成rem单位
由于很久没有用过了，似乎从零星的记忆中，宽还是比较准确，而高却有一定的偏差值。
从这种的方式，我曾改写成了 scss 文件，但写该篇时没有找到，只留下了一份笔记，以供大家审阅：
mobile.scss中
若设计图为750px则，@function pxToRem(px,base: 28.125) {//？？？？
@return (px /base) * 1rem;
}
若设计图为640px
则，
@function pxToRem(px,base: 24) {
@return (px /base) * 1rem;
}
若设计图为320px
则，
@function pxToRem(px,base: 12) {
@return (px /base) * 1rem;
}
其它scss 文件中
直接 一句 @import 'mobile'
这是跟 ba.less 反向的过程
总之，用的时候，量到100px，则 pxToRem(100)
以上写的有些乱，以后有空或者思绪好的时候，再来修改一番。
今天，我突然的想到怎么的一个问题（其实老早就有这么个疑问，只不过今天去寻找了一番）：
如何适配PC端、ipad端、手机端？
这让我想起了某一次面试，面试官问我响应式N连
面：如何响应式的？
我：通过媒体查询，根据不同的屏幕宽度使用不同的css
面：不用js吗？
我：（想了一会）不用js
面：你确定？
我：（又想了一会）确定
之后又问了一些杂七杂八的问题，反正当时我是挺开心的，满嘴跑火车，自信满山竹😄，虽然之后是不了了之了。
响应式的另一个玩法，
就是通过js来玩，通过js来判断当前操作设备，来区分，
var userAgent = navigator.userAgent.toLowerCase();
console.log('userAgent,',userAgent)
var platform;
if(userAgent == null || userAgent == ''){
platform = 'WEB' ;
location.href = "http://网址/";
}else{
if(userAgent.indexOf("android") != -1 ){
platform = 'ANDROID';
location.href = "http://网址/";
}else if(userAgent.indexOf("ios") != -1 || userAgent.indexOf("iphone") != -1 || userAgent.indexOf("ipad") != -1){
platform = 'IOS';
location.href = "http://网址/";
}else if(userAgent.indexOf("windows phone") != -1 ){
platform = 'WP';
location.href = "http://网址/";
}else{
platform = 'WEB' ;
location.href = "http://网址/";
}
}
console.log('platform,',platform)
通过判断当前操作平台，跳转到不同的二级域名，不过据说此法有点low，慎用为秒！
但是，我又有另外一个思考，
现在的响应式的框架有不少，比如说 bootstrap，又比如说近来比较火的vue的css框架 element-ui
它们的查询方式极为的简单，大概如下
/* 超小设备（手机，小于 768px） /
/ Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
我不太明白的是，为什么不去考虑768以内的具体详情，比如说 iphone5 的320，iphone7 的375，以及plus的414，而是笼统的归为 超小设备（手机，小于 768px）
其实这样也挺好，省去了许许多多的繁文缛节，只是内心稍有不安，也许是不相信幸福委身而已。
2018年8月6日 20:59:11
end
网友评论