750px设计稿处理方式

一般设计图的宽度为750px，现在我们的目标就是将layoutviewport设置为750px；

layoutviewport受到两个属性的影响，width属性我们之间设置为750，initial-scale缩放比例应该为idealviewport的宽度/750；

当我们未改变meta标签属性的时候，layoutviewport的值其实就是idealviewport的值，所以可以通过document.body.clientWidth或者window.innerWidth来获取。

(function () {const width = document.body.clientWidth || window.innerWidthconst scale = width / 750const content = 'width=750, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', viewport-fit=cover'document.querySelector('meta[name="viewport"]').content = content
})()

设置完成之后，layoutviewport在不同的设备中会始终保持为750px，我们开发时可以直接使用设计稿尺寸。

UI出图的时候一般是有一个固定的宽度的，而我们实际的移动端设备的宽度却都不太一样，

但是如果页面元素的缩放比例和页面宽度的缩放比例一致，在不同尺寸的设备下我们网页的效果也将会是一致的。

750px设计稿处理方式相关推荐

H5移动端rem布局还原750px设计稿方案。
引入对应的脚本: <!DOCTYPE html> <html> <head><meta charset="utf-8" />< ...
[html] 为什么移动端页面的设计稿一般是750px/640px呢？
[html] 为什么移动端页面的设计稿一般是750px/640px呢? 750px 代表iphone6或inphone6s 设备的像素(宽) 640px 代表inpone3Gs,inpone4/4s ...
为什么设计稿是750px
前一阵子,在研究了物理像素.设备独立像素和css像素以及viewport后,我产生了一个问题,就是为什么我们的UI所给的设计稿是750px. 这里所说的750px并不是绝对的,750px是iphone ...
设计稿是750px时的,rem设置
<script>+ function() {remLayout();function remLayout() {var w = document.documentElement.clien ...
代码更换ui图片_用技术的方式，在UI设计稿中设置随机码，保证高清
本文首发于:行者AI 在工作中会遇到批量给图片添加文字,随机码等需求,当数据码数量较大时,UI的工作量就会非常大,这时候我们可以用python来帮我们提高工作效率. 1. 需求分析我们有这样一张图片 ...
为什么前端UI设计师给750PX的2倍设计稿？
一.两个概念:物理像素,逻辑像素物理像素:是手机的实际像素. 逻辑像素:即css里常用的px. 在iphone6里物理像素是7501334,即水平750,竖直1334个像素点,而前端移动端通常以这个 ...
移动开发之设计稿转换页面单位尺寸
在写这篇文章之前,我询问了在唯品会和腾讯的童鞋.以及公司里面前端大神(深哥),对于设计稿切图的详细方法,经过对比验证,得出设计稿转换页面单位尺寸方法步骤.我分别询问下面四个问题: 1. 设计稿的单位是 ...
Vue笔记（二）如何做移动端适配让你只用关心设计稿
一. 移动端基础知识在移动端开发时,我们经常发现出现布局后有不兼容的问题,如何在不同设备上进行适配呢,希望康完这边,你能从原理到应用彻底熟悉移动端适配. 1.1 手机屏幕现状移动端设备屏幕尺寸非常 ...
从网易与淘宝的font-size思考前端设计稿与工作流
从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...

750px设计稿处理方式

750px设计稿处理方式相关推荐

最新文章

热门文章