按照惯例，先膜拜一下愿意为我们这些无知的前端小白，不嫌麻烦地解答我们的疑问，真的非常感谢
请问使用阿里的flexable.js布局的时候，在刚开始写页面的时候应该怎么设置。
比如我有一张750的设计稿，是这样的
现在有一个盒子300px大小，我把它300/75(基准) = 4rem,写在了页面，然后我谷歌浏览器一打开
这。。。全部都被放大了啊，还出现了横向滚动条。这还怎么写下去啊，全部元素几乎满屏，这样子写页面好难受啊，虽然用手机模式显示是正常的，但是开发的时候还是要用浏览器啊，请问前辈这个情况怎么处理啊。
(ps:我还想请问是不是640和750的设计稿都是针对苹果机的，也就是dpr值为2的机子？？？那安卓机dpr1的，是不是说无法用安卓机观看？，但是我用自己华为机看的时候页面没问题啊，如果问的脑残，请见谅= =）
这个布局方案用着简直不要太爽好么！
首先在浏览器上开发也要用chrome 手机端呀
因为这个是根据屏幕动态设置的font-size，rem和font-size也设置为了1rem=70px 不然怎么体现rem的超级强大的比例缩放嘛
我最近也开始用上了flexable.js来做移动端适配, 确实爽的不行, 而且适配性能都很好, 但是感觉在 ipad 上显示不怎么样,但是手机上确定无解666.
我看的也是这篇文章,然后就琢磨开始做了. 用gulp做为工具,编译css. 文章中有介绍.
很简单,就是 html + css + js + img 结构的. 其中 devCss 是开发时候你写的, 保存后会自动编译到 css 文件夹, 所以你在html里只要引用css文件夹里的css文件就行.
极客观点
项目管理
HarmonyOS
{
"name": "sharemoblie",
"version": "1.0.0",
"description": "",
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-minify-css": "^1.2.4",
"gulp-postcss": "^7.0.0",
"gulp-px3rem": "^0.3.0",
"gulp-watch": "^4.3.11",
"postcss-px2rem": "^0.3.0"
}
}
var gulp = require('gulp');
var px2rem = require('gulp-px3rem');
var watch = require('gulp-watch')
var cssmin = require('gulp-minify-css');
var connect = require('gulp-connect')
gulp.task('px2rem', function () {
gulp.src('./devCss/*.css')
.pipe(px2rem({
baseDpr: 2
}))
.pipe(gulp.dest('./css'))
.pipe(connect.reload());
});
gulp.task('connect', function () {
connect.server({
root: './', //当前项目主目录
livereload: true //自动刷新
});
});
gulp.task('watch', function () {
gulp.watch('./devCss/*.css', ['px2rem']);
})
gulp.task('html', function () {
gulp.src('./html/*.html')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch('./devCss/*.css', ['px2rem']);
gulp.watch(['./html/*.html'], ['html']); //监控html文件
}); //执行gulp server开启服务器
gulp.task('server', ['connect', 'watch', 'px2rem']);
//start
gulp server
//build
gulp px2rem
接着打开 "localhost:8080/html/你的html",就可以开始开发了.
现在有了 px2rem 工具, 就不需要在写rem了, 因为工具已经帮你算好了. 所以...
.initiator div.line {
padding-top: 20px;
}
.initiator div.line:after {
content: "";
display: block;
height: 1px; /*no*/
background-color: #999;
-webkit-transform: scale(1, 0.5);
-ms-transform: scale(1, 0.5);
transform: scale(1, 0.5);
}
.initiator div.qr_code{
font-size: 28px; /*px*/
text-align: center;
border: 1px solid #000; /*no*/
}
编译之后:
initiator div.line {
padding-top: 0.266667rem;
}
.initiator div.line:after {
content: "";
display: block;
height: 1px;
background-color: #999;
-webkit-transform: scale(1, 0.5);
-ms-transform: scale(1, 0.5);
transform: scale(1, 0.5);
}
.initiator div.qr_code {
text-align: center;
border: 1px solid #000;
}
[data-dpr="1"] .initiator div.qr_code {
font-size: 14px;
}
[data-dpr="2"] .initiator div.qr_code {
font-size: 28px;
}
[data-dpr="3"] .initiator div.qr_code {
font-size: 42px;
}发现了没, 你写px, 自动会编译成rem, 而字体不建议使用rem, 所以你要在后面加上注释 /*px*/, 会根据dpr进行放大缩小, 默认是以dpr为2位基准.
但是如果所有的px都变成了rem, 真的要用px的情况怎么办? 没关系, 在那行css后面加上注释 /*no*/, 参考上面的 border .
忘记说了, html也用的是文章作者给的模板.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<link rel="apple-touch-icon" href="favicon.png">
<link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
<title>再来一波</title>
</head>
<body>
<!-- 页面结构写在这里 -->
</body>
</html>以上.
6 回答3k 阅读✓ 已解决
8 回答4.7k 阅读✓ 已解决
6 回答3.4k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
5 回答1.3k 阅读✓ 已解决
3 回答2.5k 阅读✓ 已解决
flexible的自适应方案是只有IOS设备的dpr起作用 安卓设备的dpr为1
设置的html的fontSize值是视口尺寸的百分之一
使用的时候页面不要放
viewport建议以内联的方式在所有资源加载之前引入flexible的代码使用的话 可以自己写mixin
比如我用less，设计图的尺寸是
750px然后比如我量得元素宽度尺寸是100px
就写
.px2rem(width, 100);字体采用像素单位
2dpr,3dpr下 可以通过用[data-dpr="2"] {}，[data-dpr="3"] {}这样的选择器 覆盖1dpr下的表现样式 这样的要后写如果设计图给的是640像素的就以
iphone5参考，给的750像素就以iphone6参考。写对应的mixin