Web移动适配笔记(ing)
1.rem适配法 - 文字流式,控件弹性,图片缩放
》物理像素(physical pixel):设备上每一个用于显示的像素单元,固定不变,以'pt'为单位
》设备独立像素(density-independent pixel):虚拟像素,比如CSS像素,由其他设备转化为物理像素,单位为'dp',此时,当一个元素设置为'width:200px'时,元素跨越200个CSS像素,而钙元素在物理设备上的显示还取决于另外两个参数“页面缩放”“屏幕dpr”,
》设备像素比(device pixel ratio):由于前两者不同,而产生的映射关系,对于普通屏幕,css与设备物理像素之间的映射关系为1:1,非常一致,而在高分屏下需要将不画布大小对应提升,防止位图像素点不够
js: window.devicePixelRatio
css: -webkit-(min/max)-device-pixel-ratio
1.1媒体查询设断点
html{font-size:10px}
@media screen and (min-width:XXXpx) and (max-width:XXXpx){html{font-size:11px}}
...... //设置突变点
@media screen and (min-width:XXXpx){html{font-size:25px}}
1.符合响应式要求,但是rem在不同分辨率下映射的实际像素不同,无法保证在所有平台的统一显示,且断点设置无法保证高精度
2.1.apple官网将宽度750px一下设备默认为手机设备,此为手机与pc&平板的断点
2.2.apple官网针对dpr=1,dpr=2/3,设置两套图片,同时针对pc下不同分辨率也设置了两组图片,手机端一图
2.3.apple官网大量采用ul/li布局,虽然还不知道用意何在,静静观望-.-
2.4.apple用了relative保证文字在图片中的位置,在断点之间修改padding
3.1.huawei官网采用图片缩放,设置断点pe和pc两者,也为750px,由此目前750px应该是最高效检测平台的方法了吧~
3.2.huawei在手机端将图中文字分离到图片下方,但是在pc访问1000px以下,会出现文字错位现象
4.1.WOW官网,直接引入<video>元素,在963px之后,视频改为背景图,琢磨着是为了pe用户着想
1.2利用js预先计算页面font-size
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1">
document.documentElement.style.fontsize = document.documentElement.clientWidth / 6.4 +'px';
特点是font-size会直接写到html的style内,要如此设置,需要确定参照的值,用此参照值 * rem,最终得到元素的大小,例如:取参照比例为100,那么,设计稿中500px的元素即为5rem,而此处的6.4也为iphone分辨率 / 100。
同时这只scale=1保证了网页在页面内的显示宽度始终等于设备逻辑像素大小,即设备逻辑像素大小,其中device-width=设备物理分辨率 / (devicePixelRatio * scale),在scale=1情况下相等
1.3针对高分屏的js预计算优化,设置viewport缩放
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + 'minimum-scale=' + scale + ', user-scalable=no');
//动态计算scale
document.documentElement.style.fontsize = document.documentElement.clientWidth / 10 +'px';
例如在retina下设置border:1px,但实际是需要1宽度的物理像素,在css中可以认为是0.5px,因此设置视口scale,将1px缩小为0.5px,达到效果
1.4视觉设计流程
1.选取基准手机,现在多为iphone6的 375 * 667
2.针对高分屏(dpr),输出相应的文件
2.栅格布局
看来还是分别开发pc页面和移动端页面比较合理~响应式设计只是网页设计的折衷方案!
推荐使用场景:图文混排,板块很多,栅格化让杂乱无章的内容有条理,设计师与前段更好对接
缺点:限制设计师发挥,采用960px宽度,最大限度支持所有浏览器,但是采用宽度自适应能使得网页容纳更多信息,比如Amazon
参考:http://blog.csdn.net/azureternite/article/details/52528380
以及这篇文章中的参考,与其参考的参考
转载于:https://www.cnblogs.com/KEVIN--LEE/p/8229183.html
Web移动适配笔记(ing)相关推荐
- web前端学习笔记(最新)
web前端学习笔记 大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
- 再谈移动端Web屏幕适配
一个多月前水了一篇移动web屏幕适配方案,当时噼里啪啦的写了一通,自我感觉甚是良好.不过最近又有一些新的想法,和之前的有一些不同. 先说一下淘宝的方案,感觉现在好多的适配方案都是受了它的影响,上周六看 ...
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
- Web前端JavaScript笔记(4)节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
- Android全面屏适配笔记
由于现在的刘海屏.穿孔屏越来越多,所以现在针对这些屏幕的适配工作也越来越麻烦.有必要自己记录一份适配笔记了,防止以后要用的时候在网上找不到. (这是在没有做任何适配的情况下,直接运行老代码的效果.可以 ...
- Django Web框架教学笔记-1
<Django Web框架教学笔记> 目录 文章目录 <Django Web框架教学笔记> 目录 Django框架的介绍 Django的安装 Django框架开发 创建项目的指 ...
- Web Components 学习笔记一: Web Components是什么?解决了什么问题?
公众号:妙蛙种子前端 文章原文地址:Web Components笔记一: Web Components是什么?解决了什么问题? | 妙蛙种子 - 记录WEB前端技术学习成长过程的博客 Web Comp ...
- Java web与web gis学习笔记(二)——百度地图API调用
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- web安全学习笔记--sql语句(sql注入基础上)
一.基础知和表内操作语法 1.sql语句对大小写不敏感!!! SELECT - 从数据库表中获取数据:select * from (columns/tables/databases); UPDATE ...
最新文章
- ICML2020 | G2Gs:不依赖模板的的逆合成预测新框架
- 除了芯片 我们还应关注哪些核心技术
- 柯洁:我受够了AI围棋
- 生成条形码、印章、邮件地址(玩玩)
- 为什么说“概率”带来一场现代革命?
- 大合集!CVPR2021论文分方向整理: 目标检测/图像分割/医学影像等25个方向(持续更新)
- gitbook新版本 build命令导出的html不能跳转?
- mysql中什么叫临时表_MySQL中使用临时表需要注意哪些?
- 8月读书分享-《执行力是训练出来的》
- linux装入归档文件时出现了一个错误_Linux下解压tar.xz文件
- python获取url响应
- redis(版本redis-5.0.2)的安装步骤
- THUPC2019划水记
- ELK详解(十四)——Logstash TCP/UDP日志收集
- Atitit.js的键盘按键事件捆绑and事件调度
- VirtualBox centos下设置共享文件夹
- 文武双全!为什么数据分析师需要既懂业务又懂技术
- 并查集【算法笔记/晴神笔记】
- 人工智能资源下载2024G
- 我的×××面——深信服面试全记录
热门文章
- 【Python7】csv/excel/matplotlib,排序/树遍历,线/进程,文件/xml操作,百度人脸API,aiohttp/hal/restful/curl
- 【Tools】TeamViewer安装教程
- php远程文件包含攻击,利用SMB共享来绕过php远程文件包含的限制
- TomcatNginx源码笔记分析
- linux man命令_CentOS Linux中的man命令
- MacOS开启系统自带的NTFS读写功能
- 小腿训练三部曲之(三)
- ARM存储器的大小端存储方式
- hihoCoder #1449 : 后缀自动机三·重复旋律6
- 智能指针shared_ptr的几个例子