一、技术选型

二、搭建相关文件夹

三、设置视口标签以及引入初始化样式文件和js文件

四、body 样式

五、rem 适配方案二 body样式修改

index.css

body {

    min-width: 320px;

    max-width: 750px;

    /* flexible 给我们划分了 10 等份 */

    width: 10rem;

    margin: 0 auto;

    line-height: 1.5;

    font-family: Arial, Helvetica;

    background: #f2f2f2;

}

不再需要common.js来做屏幕适配了

六、VScode px转换rem 插件 cssrem

6.1 安装 cssrem

6.2 设置html 字体大小基准值

  1. ctrl + 逗号 打开设置

  2. 找到扩展中的 cssrem 插件 进入 Root Font Size 修改

  3. 修改完成后 重启 VScode

七、search-content布局以及修改 flexble.js 默认html字体大小

index.html

<body>

    <!-- 顶部部分 -->

    <div class="search-content"></div>

</body>

index.css

.search-content {

    position: fixed;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 10rem;

    height: 1.173333rem;

    background-color: #FFC001;

}

我们发现，由于 flexble.js中的影响，页面的效果其实是根据我们当前屏幕的大小来判定的，并不是我们想要的效果，所以我们需要修改 flexble.js 默认html字体大小

如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来执行

@media screen and (min-width: 750px) {

    html {

        font-size: 75px;

    }

}

我们发现页面还是没有达到我们想要的效果，原因是权重不够



为 html 的字体大小设置 !important

@media screen and (min-width: 750px) {

    html {

        font-size: 75px!important;

    }

}

.search-content {

    position: fixed;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 10rem;

    height: 1.173333rem;

    background-color: #FFC001;

}

八、search-content 内容制作

index.html

<body>

    <div class="search-content">

        <a href="#" class="classify"></a>

        <div class="search">

            <form action="">

                <input type="search" value="新人专享礼">

            </form>

        </div>

        <a href="#" class="login">登录</a>

    </div>

</body>

index.css

a {

    text-decoration: none;

    font-size: .333333rem;

}

.classify {

    width: .586667rem;

    height: .933333rem;

    margin: .146667rem .333333rem .133333rem;

    background: url(../images/classify.png) no-repeat;

    background-size: .586667rem .933333rem;

}

.search {

    flex: 1;

}

.search input {

    outline: none;

    border: 0;

    width: 100%;

    height: .88rem;

    font-size: .333333rem;

    background-color: #FFF2CC;

    margin-top: .133333rem;

    border-radius: .44rem;

    color: #757575;

    padding-left: .733333rem;

}

.login {

    width: 1rem;

    height: .933333rem;

    margin: .133333rem;

    color: #fff;

    text-align: center;

    line-height: .933333rem;

    font-size: .333333rem;

}

使用 flexible.js + rem 制作苏宁移动端首页的更多相关文章

  1. vue2.0 flexible.js + rem 进行自适应开发

    1.在页面中引入flexible.js base.js /** * flexible.js 阿里前端自适应解决方案 */ ;(function(win, lib) { var doc = win.do ...

  2. rem适配布局（rem+less+媒体查询 和 rem+flexible.js）

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

  3. 手淘的flexible.js解决手机适配问题

    如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...

  4. vue移动端flexible.js结合Muse-ui使用和vux的小坑

    因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...

  5. vue 的rem 配置和flexible.js的应用

    1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动 ...

  6. flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

  7. flexible.js结合rem实现移动端自适应布局

    1. 配置开发工具(sublime)插件      https://github.com/flashlizi/cssrem     注意: 只有在‘.css’后缀文件才能使用此插件功能   2. 在h ...

  8. 移动端自适应：flexible.js可伸缩布局使用

    http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现 ...

  9. flexible.js 移动端自适应方案

    一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...

  10. 有了这套flexible.js 移动端自适应方案，你就能在移动端的来去自如， (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

随机推荐

  1. BI系统打包Docker镜像及部署的技术难度和实现

    BI系统打包Docker镜像及部署的技术难度和实现 随着容器化技术盛行,Docker在前端领域也有着越来越广泛的应用:传统的前端部署方式需要我们将项目打包生成一系列的静态文件,然后上传到服务器,配置n ...

  2. 05 uniapp/微信小程序 项目day05

    ​ 一.登录与支付 1.1 登录 1.1.1 条件判断 当我们点击结算应当进行条件判断 第一个如果没有勾选商品 第二个是没选择地址 第三个是未登录 1.1.2 页面布局 应该有两个页面,一个点击登录, ...

  3. 19、从键盘输入两个数字n,m，求解n，m的最小公倍数

    /* 从键盘输入两个数字n,m,求解n,m的最小公倍数 */ #include <stdio.h> #include <stdlib.h> void getLowsetComM ...

  4. 深度学习之step by step搭建神经网络

    声明 本文参考Deep-Learning-Specialization-Coursera/Convolution_model_Step_by_Step_v1.ipynb at main · abdur ...

  5. c++题目：数迷

    c++题目:数迷 题目 [题目描述] 给出含有N×N个格子的正方形表格,要求每个格子都填上一个个位数(范围1-N),使得每行.每列以及同一斜线上的数字都不同.部分格子已经填好数字.求满足题意的方案数. ...

  6. Day31面向对象之魔法方法

    Day31面向对象之魔法方法 类的常用魔法方法如下 序号 双下方法 触发条件 1 init 对象添加独有数据的时候自动触发 2 str 对象被执行打印操作的时候自动触发 3 call 对象加括号调用的 ...

  7. 【SQL真题】SQL3：每类视频近一个月的转发量/率

    题目: https://www.nowcoder.com/practice/a78cf92c11e0421abf93762d25c3bfad?tpId=268&tqId=2285068& ...

  8. 【大数据面试】Flink 01 概述：包含内容、层次架构、运行组件、部署模式、任务提交流程、任务调度概念、编程模型组成

    一.概述 1.介绍 对无界和有界数据流进行有状态计算的分布式引擎和框架,并可以使用高层API编写分布式任务,主要包括: DataSet API(批处理):静态数据抽象为分布式数据集,方便使用操作符进行 ...

  9. 【每日一题】【双指针、位运算】2022年2月3日-NC103 反转字符串

    描述 写出一个程序,接受一个字符串,然后输出该字符串反转后的字符串.(字符串长度不超过1000) 答案:双指针 import java.util.*; public class Solution { ...

  10. 【HBase】简介、结构、数据模型、快速入门部署、shell操作、架构原理、读写数据流程、数据刷写、压缩、分割、Phoenix、表的映射、与hive集成、优化

    一.简介 1.定义 分布式.可扩展.支持海量数据存储的NoSQL数据库 2.数据模型 2.1逻辑结构 2.2物理存储结构 2.3数据模型介绍 Name Space:相当于数据库,包含很多张表 Regi ...