当前位置：文江博客话题详情

CSS 响应式自适应布局前端

请问用阿里的flexable布局自适应页面，应该怎么开始。

发布于 2022-09-06 01:56:45 字数 793 浏览 41 评论 0

按照惯例，先膜拜一下愿意为我们这些无知的前端小白，不嫌麻烦地解答我们的疑问，真的非常感谢

请问使用阿里的flexable.js布局的时候，在刚开始写页面的时候应该怎么设置。

比如我有一张750的设计稿，是这样的图片描述
现在有一个盒子300px大小，我把它300/75(基准) = 4rem,写在了页面，然后我谷歌浏览器一打开

图片描述

这。。。全部都被放大了啊，还出现了横向滚动条。这还怎么写下去啊，全部元素几乎满屏，这样子写页面好难受啊，虽然用手机模式显示是正常的，但是开发的时候还是要用浏览器啊，请问前辈这个情况怎么处理啊。

(ps:我还想请问是不是640和750的设计稿都是针对苹果机的，也就是dpr值为2的机子？？？那安卓机dpr1的，是不是说无法用安卓机观看？，但是我用自己华为机看的时候页面没问题啊，如果问的脑残，请见谅= =）

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏别ゝ 2022-09-13 01:56:45

flexible的自适应方案是只有IOS设备的dpr起作用安卓设备的dpr为1
设置的html的fontSize值是视口尺寸的百分之一

使用的时候页面不要放viewport 建议以内联的方式在所有资源加载之前引入flexible的代码

使用的话可以自己写mixin

比如我用less，设计图的尺寸是750px

.px2rem(@name, @px){
  @{name}: (@px / 75) * 1rem;
}

然后比如我量得元素宽度尺寸是100px

就写 .px2rem(width, 100);

字体采用像素单位

2dpr, 3dpr下可以通过用[data-dpr="2"] {}， [data-dpr="3"] {}这样的选择器覆盖1dpr下的表现样式这样的要后写

如果设计图给的是640像素的就以iphone5参考，给的750像素就以iphone6参考。
写对应的mixin

回复收藏 0

丿*梦醉红颜 2022-09-13 01:56:45

chrome有移动端开发模式
图片描述

回复收藏 0

生寂 2022-09-13 01:56:45

这个布局方案用着简直不要太爽好么！

首先在浏览器上开发也要用chrome 手机端呀

因为这个是根据屏幕动态设置的font-size，rem和font-size也设置为了1rem=70px 不然怎么体现rem的超级强大的比例缩放嘛

回复收藏 0

沉溺在你眼里的海 2022-09-13 01:56:45

我最近也开始用上了flexable.js来做移动端适配, 确实爽的不行, 而且适配性能都很好, 但是感觉在 ipad 上显示不怎么样,但是手机上确定无解666.

使用Flexible实现手淘H5页面的终端适配

我看的也是这篇文章,然后就琢磨开始做了. 用gulp做为工具,编译css. 文章中有介绍.

PostCSS

项目目录

很简单,就是 html + css + js + img 结构的. 其中 devCss 是开发时候你写的, 保存后会自动编译到 css 文件夹, 所以你在html里只要引用css文件夹里的css文件就行.

模块依赖(package.json)


{
  "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"
  }
}

gulpfile

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>

以上.

回复收藏 0

~没有更多了~