如何使用蓝湖设计稿同时适配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. 冰点文库下载器 v3.2.12(0314) 去广告单文件

    冰点文库,免积分免登陆文档下载神器!付费文档免费下载工具.百度文库免费下载工具.        冰点文库下载器,免费下载文档工具,无需积分也无需登陆就能自由下载百度文库.豆丁网.丁香网.电器网.MBA ...

  2. vue 编程式导航

    // 命名的路由(这里的name为路由中定义的name名称) this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参 ...

  3. 宝塔linux面板防护CC设置

    使用宝塔linux面板很多用户受到CC攻击不知如何防范. 下面讲下如何利用宝塔自带的功能来进行基本的CC防护. 首先是在nginx上有个waf安全模块,里面有CC防护设置.(要求nginx为1.12版 ...

  4. 搞定MySQL安装难安装贵问题

    背景 本方案解决了windows下安装MySQL过程繁琐的问题. 是真正的免安装绿色方法,不用配环境变量,不用执行install命令,不用配置my.ini文件. 步骤 下载 下载mysql-8.0.2 ...

  5. centos 7 配置 mysql 5.7 主从复制

    centos 7 配置 mysql 5.7 主从复制 主库:192.168.12.3 从库:192.168.12.2 1. 主库从库所在服务器关闭防火墙Systemctl stop firewalld ...

  6. Docker(五)：Docker安装Elasticsearch

    查找ElasticSearch镜像 镜像仓库 https://hub.docker.com/ 下拉镜像 docker pull elasticsearch:7.7.0 查看镜像 docker imag ...

  7. css 10-CSS3选择器详解

    10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...

  8. css 05-CSS样式表的继承性和层叠性

    05-CSS样式表的继承性和层叠性 #本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签,携带了多个类名 !important标记 ...

  9. 推荐系统实践 0x11 NeuralCF

    前言 这一篇文章我们来谈一下2017年新加坡国立大学提出的基于深度学习的系统过滤模型NeuralCF.我们在之前讲过矩阵分解技术,将协同过滤中的共现矩阵分解成用户向量矩阵以及物品向量矩阵.那么Embe ...

  10. C4 模型 - 可视化架构设计

    前言 世界上最难的两件事是: 1. 把我的思想放进你的脑袋 2. 把你的钱放进我的口袋 第二点我们不探讨,因为这是众所周知的,不信?过来试试:) 对于第一点,对我们程序员来说,其实也是我个人一直强调的 ...