61,112
社区成员
发帖
与我相关
我的任务
分享小白发帖关于webapp，rem适配问题
之前没接触过webapp和移动端，新公司的ui小姐姐给了张宽为750px的设计图片，字体大小为28px；padding：20px。自己弄了一下午也没把页面写出来，用谷歌浏览器去调试，往往写完一个屏幕的页面 ，换到其他屏幕排版就飞了。。。另外公司都是用html{ font-size：100px }；哪位朋友给小白指个明路，讲讲应该怎么写吗？
...全文
请发表友善的回复…
发表回复
gtp5101530 2017-10-28
- 打赏
- 举报
浏览器不同 显示的得不一样 你得设计分布式响应 针对各种浏览器版本不兼容的问题
前端-珊珊 2017-10-21
- 打赏
- 举报
// 主要是为了适应不同的viewpoint
! function(e) {
function t(a) {
if(i[a]) return i[a].exports;
var n = i[a] = {
exports: {},
id: a,
loaded: !1
};
return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
}
var i = {};
return t.m = e, t.c = i, t.p = "", t(0)
}([function(e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var i = window;
t["default"] = i.flex = function(e, t) {
var a = e || 100,
n = t || 1,
r = i.document,
o = navigator.userAgent,
d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
l = o.match(/U3\/((\d+|\.){5,})/i),
c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s = i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s = 1);
var u = 1 / s,
m = r.querySelector('meta[name="viewport"]');
m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
}, e.exports = t["default"]
}]);
flex(100, 1);
这是某位大神写的，你可以直接用，100px=1rem;拿走不谢
冰久 2017-10-20
- 打赏
- 举报
根据设计图的大小来设置的。
750的设计图可以这样设置。
window.onload=function(){
var width=document.documentElement.clientwidth;
document.documentElement.style.fontSize=width/7.5+"px'.
}
这样1rem就等于100px了。
由于750的设计图大多是用于375大小的手机屏幕。
1rem在写的时候就等于50px。
而设计图的是手机屏幕的2倍
写的时候就不用把距离除以2了。大概是这样
persuit666 2017-09-26
- 打赏
- 举报
另外公司都是用html{ font-size：100px }；哪位朋友给小白指个明路，讲讲应该怎么写吗？ 这是啥意思？
webapp适配页面一般都是采用屏幕media来自适应的，建议你用bootstrap的栅格模式，都给你写好了，多大屏幕占多少格，如果不满足会自动换行
ct_web 2017-09-26
- 打赏
- 举报
不要沉啊，顶一下
ct_web 2017-09-26
- 打赏
- 举报
兄弟不用编辑器可以吗？大家平时都怎么解决这类问题
x80819091 2017-09-26
- 打赏
- 举报
如果你只是说rem的话，可以写px，然后用编辑器转成rem，蛮方便的
ct_web 2017-09-26
- 打赏
- 举报
在线等，大牛召唤术
