DPR 与 viewport

2024-10-29

移动端页面：viewport与分辨率的坑

淘宝网触屏版 - 学习笔记（0 - 关于dpr）

注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=none"> 然后再根据实际预览效果,对一些比例或者清晰度问题进行调整,以达到最佳效果.当然

原生JS实现购物车结算功能代码+zepto版

html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con

移动端web页面如何适配

移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案在页面中加入viewport.js var doc = window.document, docEle = doc.documentElement, dpr = Math.ceil(window.devicePixelRatio), vp = document.querySelector('meta[name="viewpo

移动端移动web屏幕适配方案随不同宽度的屏幕而改变

链接地址1:http://www.cnblogs.com/zjzhome/p/4802157.html 链接地址2:http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041 链接地址3:http://isux.tencent.com/web-app-rem.html common.js参考淘宝m.taobao.com var dpr, rem

移动web屏幕适配方案

刚进部门就被拉去趟移动端Web的浑水,视觉稿是按照640px设计的.那如何做屏幕适配呢?当然想到的第一方法就是问前辈了,问他们之前怎么做的,前辈说直接按视觉稿来,我说640太大了,他说除以2啊,按320来..我说不行吧,屏幕多种多样的,6 plus显示的得多小..他说你和视觉沟通下...orz...还是自食其力吧——网络搜索,大概能搜到一些,不过要么太高大全(淘宝的方案),要么都是零零碎碎的.最终根据淘宝的方案还有Rem这个单位,自己做了一套简单的方案. 开始呢,还是要对一些概念做一些说明,当然

移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]

Lovesueee 发布于 8 月前移动端高清.多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍

关于移动端 rem 布局的一些总结

[资源一]基础知识恕不回顾基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/define-font-size-with-css3-rem [资源二]淘宝m站首页的动态实现学习http://m.taobao.com 首页的实现. 最近读到@大漠的新文章<使用Flexible实现手淘H5页面的终端适配>,和本部分有点关系.暂且加上来以供参考.(updated 2015-11-24

移动端 rem字体的使用demo

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />

细谈最近上线的Vue2.0项目（一）

8月初离职,来到现在的新东家负责一个新的项目.而我最近开发的两个webapp一直都是以Vue为主,这也是这篇文章的由来. 正文前的胡侃&一点点吐槽在经历了两个公司不同的项目后,发现都存在一个很致命却又如此相似的问题.就是领导层的决策,导致项目的开发后期加班严重.领导们普遍都是先DIY,然后等到项目开发到尾期的时候,突然说,我用了很多类似的东西,发现我们做出来和他们的有很大的出入,吧啦吧啦一堆,重点就是,我们自己设计出来的,当时他拍板说:“没问题的东西”,现在有问题了!UI要换掉,功能要精简.结

rem实现移动端自适应页面

一.把px转换成rem方案 1.cssrem插件 2.css预处理器 3.rem-unit插件 4.px2rem插件 rem就是相对于根元素的font-size来做计算,设置好根结点字体大小,子节点用rem做单位,实现自适应. 二.动态改变字体大小方案 1.css方案之媒体查询设置html的font-size @media screen and (min-width: 320px) { html {font-size: 14px;} } @media screen and (min-width

细说移动端经典的REM布局与新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局实现单边边框1px 实现多边边框1px 实现边框圆角实现容器固定纵横比 5. REM + VW布局 6. 对比选择方案选择食用方式一.前言说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些布局概念: 1. 静态布局直

移动端高清适配方案（解决图片模糊问题、1px细线问题）

本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >>>>物理像素.设备独立像素和设备像素比在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的.在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但

移动端动态font-size

/** * Created by shimin on 2017/8/18. *///计算dpr!function(win, lib) { var timer, doc = win.document, docElem = doc.documentElement, vpMeta = doc.querySelector('meta[name="viewport"]'), flexMeta = doc.querySelector('meta[name="flexible"]

手机布局rem的使用(rem)

最后一堆代码是举例的全码. 一直接<head>标签里套用以下,其他都不用 <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + "px"; window.addEventListener("resize",function(){ document.documentElement.style.fon

移动端web及app设计尺寸

转载 2017年07月27日 22:48:16 984 移动端高清.多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布

手机html根据手机分辨率网页文字大小自适应

问题:不同手机型号屏幕尺寸大不相同,导致同样的文字,有的显示一行,有的显示多行. 通过查资料和自己的尝试解决:网页开发习惯的px单位,手机html开发不适用. 源代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta name="viewport" cont

JS 自动计算HTML的font-size

Rem尺寸解决方案,需要配合一些js动态设置<html>标签的font-size 和 viewport来配合 <script> (function(doc, win) { var dpr, rem, scale; var docEl = document.documentElement; var metaEl = document.querySelector('meta[name="viewport"]'); var resizeEvt = 'orientati

js常用代码收集

1. PC - js 返回指定范围的随机数(m-n之间)的公式 Math.random()*(n-m)+m return false return false // event.preventDefault()会阻挡预设要发生的事件. // event.stopPropagation()会阻挡发生冒泡事件. // 而return false则是前面两者的事情他都会做: // 他会做event.preventDefault(); // 他会做event.stopPropagation(); //

移动端，多屏幕尺寸高清屏retina屏适配的解决方案

移动端高清.多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

web开发中移动端适配

这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 1.2 屏幕密度(ppi) 屏幕密度是指一个设备表面上存在的像素数量,它通常以每1英寸上排列有多少像素来计算(ppi:Pixels Per Inch).苹果公司声称人类的肉眼无法区分单个像素,当一个显示器像素密度超过300ppi的时候,肉眼就

DPR 与 viewport

热门专题