pc端1920*1080的设计稿怎么适配

2024-08-31

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

如何使用蓝湖设计稿同时适配PC及移动端项目需求: 一套代码同时适配PC及移动端方案: pc端采用px布局,移动端采用rem布局,通过媒体查询(media query)切换坑: 尝试过使用postcss-pxtorem来自动将px转换rem, 只能满足移动端,无法同时适配PC及移动端,感觉PC端还是使用固定像素px来布局好一点 PC端设计稿尺寸1920*1080 为了设备不同分辨率的屏幕,可选择将设计稿宽度设置为1440 采用固定尺寸,固定字体,伸缩布局如果是官网类的网站,采用固定宽度(

移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含 <meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”view

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

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最值得学习的10个H5案例(各种经典,推荐收藏) 这可能是近半年做得最好的4个H5传播案例还没搞懂H5营销?他们已经开始在玩“虚拟现实”了! 一个插线板的H5怎么就火了?大家明明是去看周鸿祎的八卦的那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是

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

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

移动端和pc端，响应式设计布局

1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本. 2.响应式的作用:设计最好的用户体验友好的用户体验是网页可以在任何设备上展示和操作,设备包括桌面系统设备,平板电脑,iPhone等手机等. 网页应该根据设备的大小自动调整内容. 页面的设计与开发根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整称之为响应式 Web

蓝色的PC端后台管理界面设计模板——后台

链接:http://pan.baidu.com/s/1o82hXX4 密码:x6le

pc端页面显示在手机一行控制适配问题

移动设备分辨率（终于弄懂了为什么移动端设计稿总是640px和750px）

在我开始写移动端页面至今,一直有2个疑问困扰着我,我只知道结果但不知道为什么问题1:为什么设计师给的设计稿总是640px或750px(现在一般以Phone6为基准,给的750px) 问题2:为什么我们拿到640px和750px的设计稿,在编码的时候都要除以2, (比如设计稿上有一个图标宽高是40*40,我们需要先除以2,实际编码时候宽高要写成20*20) 之前也在网上搜过一些相关的文章,但无奈大多说的比较晦涩难懂,要嘛就是太过于深奥.也可能是我脑子不够用吧. 不过要完全理解,确实也需要相

移动端(手机端)页面自适应解决方案1（rem布局）---750设计稿

设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于动态计算font-size (function(doc, win) { var docEl = doc.documentElement, isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), dpr = isIOS ?

移动端 750px UI 设计稿

750px UI 设计稿 App 小程序 H5 rem & vh/vw 在移动端页面开发中,UI 一般会用750px(iphone 6)来出设计稿; 然后要求能够做到页面是自适应屏幕的,这种情况下就可以用 rem或者 vh/vw 等相对单位来做适配; why 750px 是 iPhone6 的物理像素,即屏幕分辨率; 移动端 UI 设计稿是按照 iPhone6 设备的物理像素所给; 通过动态的获取设备独立像素,然后除以设计稿的宽度,然后设置 rem,来动态自适应字体大小; 为什么要乘100,放大

自适应PC端网页制作使用REM

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.使用rem的地方 width,height,margin,padding,left top都采用了REM, HTML的FONT-SIZE设置的为100PX.是为了计算方便

pc端常见布局样式总结（针对常见的）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 宽度适配 */ html, body { width: 100%; overflow-x: hidden;/* 外层盒子设置最小宽度的话看不到横向滚动条 */ } /*1. pc端适配的需求:目

使用rem配置PC端自适应大屏

效果如下使得大屏不论在什么宽高比例依然能展示全部数据安装 npm install -S postcss-pxtorem rem配置思路原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条. 但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件 rem.js可以放在src文件夹下,我是放在src下的utils文件夹中初始的rem配置 // 设置 rem 函数 functi

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

这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我们只说iOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱.1 Part 1 项目立项文件结构项目名称v1.0 -> 01_源文件psd 02_效果图jpg 03_标注图png 04_标注源文件 05_切片资源png 原型.rar 工具: 界面设计:PS, AI 标注:PxCo

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

本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @media

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

从网易与淘宝的font-size思考前端设计稿与工作流阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出最近阅读白树的博文<移动web资源整理>时,他在博文中有一段

一款APP从设计稿到切图过程全方位揭秘 Mark

纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为

纯干货！一款APP从设计稿到切图过程全方位揭秘（转）

@BAT_LCK :我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱,我整理好以后再说吧.

PC端页面适应不同的分辨率的方法（转载）

原文地址:https://blog.csdn.net/fengzhen8023/article/details/81281117 上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率. 通过师傅的指导和自己查阅资料,最终成功适配不同的分辨率,完成了这个项目. 现在回头再来看这个项目,突然发现适配不同的分辨率真的非常简单.这里总结两种方法,跟大家分享一下.希望可以帮助大家快速完成自己的项目. 一.根据不同的分辨率,加载不同的CSS样

vue实现PC端分辨率适配

lib-flexible + px2rem Loader lib-flexible 阿里伸缩布局方案 px2rem-loader:px转rem: 依赖首先需要安装 vue-cli 脚手架,这里我安装的是 cli3. 项目初始化完成后,在项目目录中安装 lib-flexible 和 px2rem-loader. npm install lib-flexible --save-dev npm i postcss-px2rem --save 接着在项目入口文件 main.js 中引入 lib-fle

pc端1920*1080的设计稿 怎么适配

热门专题

pc端1920*1080的设计稿怎么适配