当UI给了设计稿时如何正确写一个移动端样式

最新推荐文章于 2022-09-16 20:26:20 发布
最新推荐文章于 2022-09-16 20:26:20 发布
阅读量489 收藏
点赞数
文章标签： javascript android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LaoYangSaid/article/details/106914757
版权
常规的设计稿以750为标准规定的,
而我们要把它转换为375的格式(iphone6格式)
在没引入rem.js文件时 直接转换

在这里插入图片描述

二种方法

  1. 直接用@media()
  2. 引入自己定义的或者t他人写的rem.js样式

栏珊格式 @media()转化rem 适配常用机型

引入rem.js文件 适配常用机型

文阳兄
关注
拿到一份设计稿，我该如何进行移动端开发？
weixin_45566319的博客
09-17 1006
出来混，那些混过去的，迟早是要还的 (￣Д ￣)┍ 。 让我们来解决几个问题： 1. 什么是 viewport ? 它的的作用是啥？ 提到 viewport，之前总感觉挺突兀的，但是当我最近做移动端项目时，突然关注到一直被忽略的 meta 标签的时候，才恍然大悟（o(╯□╰)o）。那么，首先让我们来了解一下 meta 标签☛一直被忽略的meta标签了解一下，之后再去看 viewport，就很容易记...
ui设计移动端字体适配_移动端UI设计规范
weixin_39818631的博客
12-20 946
一、边距、间距原则：边距(左右)要大于间距(上下)。模块边距10px、12px、15px、16px15px 常用10px 最小，要展示更多的内容才用模块间距8px、10px、15px、16px、20px常用 10px 15px 20px内容间距5px 10px 15px内容边距5px 10px 15px列表最小高度 40px单行 53px 55px 66px二、全局规则图片比例16:9、4:3、3...
移动端样式小技巧
yeana1的博客
09-09 1283
平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！ 本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。 一、line-height line-height经常用于文字居中，当然也有小伙伴会用上下padding去写.b
总结个人使用过的移动端布局方法
weixin_33895695的博客
08-01 134
这篇文章，主要是总结一下，我在移动端布局用过的方法。有三种，一种是响应式布局，利用@meida判断各个size;第二种是REM;最后是设置viewport中的width。 响应式布局 这种感觉是最好理解了，利用@media进行断点，在每个断点中编写css。 @media(max-width:768px){ //css } ...
如何写移动端页面
e87e09e11的博客
04-06 1996
移动端rem的两种用法 1 1rem=100px; 2 1rem=十分之一屏幕宽
移动端页面的写法
weixin_44196873的博客
07-31 1237
第一步 ：html 页面 meta 标签声明 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 第二部 ：CSS中将所有元素转换为怪异盒模型： *{ box-sizing：bord...
ui设计移动端字体适配_移动端界面设计之尺寸篇
weixin_39830233的博客
12-20 1805
画布尺寸：新建750×1334 分辨率72，像素/英寸。常见的字体大小：24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。字体：中文用苹方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。app所用的字体大礼包下载(虎哥整理的)ios开发里单位是pt750×1334尺寸的换算关系 1pt=2px，也就是说程序员...
最全移动端UI设计规范，作为前端的你，了解多少？
weixin_38415876的博客
07-23 3396
很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。 目录 界面设计尺寸及栏高度 边距和间距 内容布局 界面图片设计比例 建立统一风格的图标 APP版式设计规范 界面文字设计规范 设计适配 切图规范 设计稿标注
在线教育app移动端页面psd设计稿.zip
01-16
在线教育App移动端页面的PSD设计稿是网页和UI设计师为移动应用创建视觉表现的重要工具。这类设计稿通常包括各种屏幕界面元素，如导航栏、按钮、图标、内容区域、滚动条、反馈提示等，旨在提供一个清晰、直观且吸引...
详解vue移动端项目的适配(以mint-ui为例)
10-18
在开发Vue移动端项目时，适配问题至关重要，以确保应用能在不同尺寸的设备上正常显示。本篇文章将基于Mint-UI库详细讲解如何进行移动端适配。 首先，使用`vue-cli`创建项目骨架，这一步是搭建Vue项目的基础，但在...
手机移动端web分类页面
09-17
该移动端web分类页面是使用HTML5+CSS3+JQuery写的，样式采用LESS写法，适应各类分辨率的手机屏幕，适合前端小白对移动端web端开发的实践项目，欢迎下载学习！
写移动端的写法
m0_62988771的博客
10-20 164
在pc中对应的一个物理像素就是一个css像素，在移动端需要一个dpr（物理像素）对应一个两个或三个css像素 用 @media all and (min-width:320px) { body { background-color:blue;} } 在书写的时候，可以针对不同的窗口设置不同手机尺寸的像素点大小 在书写移动端时，用px单位在移动端会太大，需要换算单位 1vw=窗口的百分之一 100vw=窗口的100% iphone7手机dpr像素 =750px 750px/2=350px...
input的CheckBox，根据UI给的设计稿，开发出好看的样式
weixin_41308566的博客
01-04 426
HTML代码 阅读同意 《用户注册协议》 css代码 input[type=checkbox]{ opacity: 0; -webkit-appearance: none;} input[type=checkbox]+label{ display: block; width: 0.453rem; height
移动端css样式设置
yhbsww0523的博客
11-29 7067
1、移动端字体定义 body{font-family: Helvetica;} 说明：在pc端，我们通常都会使用“微软雅黑”字体。但在移动端，ios、 android、winphone三大系统都没有“微软雅黑”字体。各手机系统都有自己的默认中文字体，且肉眼很难看出区别。所以在无特殊需求的情况下，直接使用系统默认中文字体就好。 英文和数字都设定为 Helvetica，三种系统都支持。而且，在i
移动端如何编写
weixin_47031868的博客
02-27 551
一般来说，移动端都是头部固定，底部固定 那么可以用flex布局 html,body{height: 100%;} 整个盒子外部，或者body body{display: flex;flex-direction: column;} 然后头部跟底部写好高度 中间部分 flex:1 overflow-y:auto reset.css body,ul,li,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,form,img,table,fieldset,legend{margin:0; padding
CSS——利用HTML+CSS书写移动端页面的相关知识点
Bonsoir777的博客
08-03 1264
本文主要介绍的是使用HTML+CSS书写移动端页面的相关知识点。
移动端页面开发
qq_44839718的博客
10-10 2982
移动端页面开发 移动端页面开发需要掌握的 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示； 全新的 KaTeX数学公式 语法； 增加了支持甘特图的mermaid语法1 功能； 增加了 多屏幕编辑 M
html移动端
qq_43201652的博客
09-16 548
html移动端
移动端页面的开发
weixin_45012866的博客
07-16 357
一、移动端页面 移动端的浏览器大部分都是采用的webkit内核为主，可以放心的使用HTML5和CSS3. 二、流式布局 为了保护流式布局的显示的内容，我们不能让页面无限的扩大或者缩小，所以我们可以设置一个最大宽度和最小宽度。 流式布局我们只管宽度就可以了。 三、flex布局 相比于传统的布局，flex布局不需要浮动，不需要清除浮动。只用写一句话就可以让盒子平均分配和居中对齐。 一般称flex布局为弹性布局，任何一个容器都可以指定为弹性布局，不管是行内元素还是块级元素，在flex眼中都是一样的，都可
vue 移动端 element ui 适配rem
最新发布
08-03
2. **设置全局样式**：为了基于设备像素比（dpr）动态计算rem值，你可以创建一个自定义的`px2rem`函数，将px转换为rem，并应用到全局样式表或Vue的根组件上。 ```javascript const px2Rem = (value, basePx) => {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值