如何使用蓝湖设计稿同时适配PC及移动端

项目需求： 一套代码同时适配PC及移动端

方案: pc端采用px布局，移动端采用rem布局，通过媒体查询（media query）切换

坑： 尝试过使用postcss-pxtorem来自动将px转换rem, 只能满足移动端，无法同时适配PC及移动端，感觉PC端还是使用固定像素px来布局好一点

PC端

设计稿尺寸1920*1080

为了设备不同分辨率的屏幕，可选择将设计稿宽度设置为1440

采用固定尺寸，固定字体，伸缩布局

如果是官网类的网站，采用固定宽度（如最大宽度1200）居中显示，管理类系统可采用可伸缩布局，菜单、导航固定，表格、内容等伸缩展示

移动端

设计稿尺寸750*2000

移动端使用rem布局,将CSS Rem为75

设置后可直接复制css代码

可配合amfe-flexible适配不同尺寸的移动端设备



　//安装

　npm i -S amfe-flexible

　//main.js引入

  import 'amfe-flexible'

如何使用蓝湖设计稿同时适配PC及移动端的更多相关文章

  1. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  2. 蓝湖 UI 设计稿上如何生成渐变色和复制渐变色

    蓝湖 UI 设计稿上如何生成渐变色和复制渐变色 Sketch 生成渐变色 不要上传图片,切图 如果是切图,切图模式下就不会生成 css 代码了 复制渐变色 OK .button { width: 28 ...

  3. React Native不同设备分辨率适配和设计稿尺寸单位px的适配

    React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...

  4. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  5. 程序员PS技能（四）：程序员创建PSD文件、展示简单PSD设计流程，上传PSD至蓝湖，并下载Demo切图

    前言   本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了.   前提条件   已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传 ...

  6. iOS设计 - 一款APP从设计稿到切图过程概述

    这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...

  7. 从网易与淘宝的font-size思考前端设计稿与工作流

    本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...

  8. 从网易与淘宝的font-size思考前端设计稿与工作流 (转)

    从网易与淘宝的font-size思考前端设计稿与工作流   阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7 ...

  9. 学习笔记：只有一套app设计稿（5s尺寸）切出4和4s尺寸以及安卓系统主流尺寸的图

    如何在只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图 转自:http://www.zhihu.com/question/23255417   版权归原作者所有 目前ios手机 ...

随机推荐

  1. filebeat输出结果到elasticsearch的多个索引

    基本环境: filebeat版本:6.5.4 (Linux,x86-64) elasticsearch版本:6.54   (一)需求说明 在一台服务器上有多个日志需要使用filebeat日志收集到el ...

  2. Acwing 734. 能量石

    贪心(微扰) + dp 这道题还是比较难的,前置知识: 贪心的微扰(邻项交换)证法,例题:国王游戏,耍杂技的牛 01背包 算法1:暴力\(O(T * n! * n)\) 可以\(dfs\)全排列枚举所 ...

  3. 新挖个坑，准备学习一下databricks的spark博客

    挖坑 https://databricks.com/blog 一.spark3.0特性(Introducing Apache Spark 3.0) 1.通过通过自适应查询执行,动态分区修剪和其他优化使 ...

  4. JAVA字符配置替换方案

    在JAVA中,很多时候,我们后台要对数据进行变量配置,希望可以在运行时再进行变量替换.我们今天给大空提供的是org.apache.commons.text方案. 1.首先,引用org.apache.c ...

  5. 用正则怎么将html文件中文字取出进行ASCII码转换？

    用正则怎么将html文件中文字取出?今天碰到这个问题,思来想去尝试了好几种方法,历经一阵头脑风暴,最后终于还是解决了,想想还是来记录一下.一共定义了三个函数,包含正则切割.正则判断对象开头.ASCII ...

  6. html 04-HTML标签图文详解（一）

    04-HTML标签图文详解(一) #一.排版标签 #注释标签 <!-- 注释 -->   #段落标签<p> <p>This is a paragraph</p ...

  7. [日常摸鱼]bzoj2038[2009国家集训队]小Z的袜子-莫队算法

    今天来学了下莫队-这题应该就是这个算法的出处了 一篇别人的blog:https://www.cnblogs.com/Paul-Guderian/p/6933799.html 题意:一个序列,$m$次询 ...

  8. 在IDEA中使用JDBC获取数据库连接时的报错及解决办法

    在IDEA中使用JDBC获取数据库连接时,有时会报错Sat Dec 19 19:32:18 CST 2020 WARN: Establishing SSL connection without ser ...

  9. 彻底理解Spring如何解决循环依赖

    Spring bean生命周期 可以简化为以下5步. 1.构建BeanDefinition 2.实例化 Instantiation 3.属性赋值 Populate 4.初始化 Initializati ...

  10. C#中的深度学习（二）：预处理识别硬币的数据集

    在文章中,我们将对输入到机器学习模型中的数据集进行预处理. 这里我们将对一个硬币数据集进行预处理,以便以后在监督学习模型中进行训练.在机器学习中预处理数据集通常涉及以下任务: 清理数据--通过对周围数 ...