摘要：一些基础请看这篇的一篇真正教会你开发移动端页面的文章二这段代码是让布局视口的尺寸等于理想视口。响应式工作大，维护性难缩放天猫，使用布局，字体单位用淘宝，使用库，是他们自己的一个库，思想就是根据去动态设置，元素宽高都用。
0.一些基础
请看这篇：HcySunYang的blog：一篇真正教会你开发移动端页面的文章(二)
width=device-width 这段代码是让布局视口的尺寸等于理想视口。
设备像素比（DPR） = 设备像素个数 / 理想视口像素个数（device-width）
!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
};
win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window));
2.媒体查询较密集的断点
使用css3 media query 实现；
另可以使用sass的calc（）。
@media screen and (min-width: 320px) {
html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
html {font-size: 18px;}
}
@media screen and (min-width: 440px) {
html {font-size: 20px;}
}
@media screen and (min-width: 480px) {
html {font-size: 22px;}
}
@media screen and (min-width: 640px) {
html {font-size: 28px;}
}
3.强大的单位——vw
使用单位 vw 实现动态计算。
html {
font-size: 31.25vw; /* 表达式：100*100vw/320 */
}
首先，支持 CSS3 calc方法 和 rem、vw单位的浏览器下，只需要html {font-size: 15.625vw;}这样一句就好，另外加个媒体查询限制下。
不过考虑到国内兼容性的问题，还是结合媒体查询来使用比较好。（媒体查询的断点暂时是借用上面的例子）
1、拿到设计图，计算出页面的总宽，为了好计算，取100px的font-size，如果设计图是iPhone6的那么计算出的就是7.5rem，如果页面是iPhone5的那么计算出的结果就是6.4rem。
2、动态设置html标签的font-size值：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + "px";
如iPhone6的设计图就是：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
iPhone5的设计图就是：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + "px";
3、做页面是测量设计图的px尺寸除以100得到rem尺寸。
4、和淘宝的做法一样，文字字体大小不要使用rem换算，而是使用媒体查询（？？？）
可为什么不用rem呢？后来去查了一番资料，发现有一种叫做点阵字体的存在（什么是点阵字体），也叫作位图字体，位图我们都知道，跟矢量图是有区别的，就是放大会模糊，所以点阵字体也是放大会模糊的，如果根据rem设置字体大小，字体会自由缩放，可能就会导致点阵字体模糊，所以需要设定使用几种固定大小的字体。不过，在正常情况下，系统自带的字体都是矢量字体，所以使用rem为单位是没有问题的，除非你的网页需要用到特殊的点阵字体。
5.lib.flexible
手淘开源库
总结 宽度用百分比，高度用rem，字号用rem或媒体查询，或者直接用手淘开源库。 !需注意chrome的font-size不能小于12px流式布局（百分比) 横向易被拉长，兼容性；
定宽 。。。
响应式 工作大，维护性难；
viewport缩放；
天猫，使用flex布局，字体单位用px
淘宝，使用 flexible 库，是他们自己的一个库，思想就是根据DPR去动态设置rem，元素宽高都用rem。这样就和以前在PC上一样了，宽高等等都用固定值。
网易
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112085.html
摘要：当媒介最大宽度为且是横屏时里面的样式生效目前前端开发项目类型可以分为两种方式，和。这样我们的响应式网页才完全生效了。移动端特点移动端特点没有有没有滚动条没有没有因为移动端是没有事件的所以当我们在需要兼容移动端的页面中应该尽量少用事件。鄙人最近才刚刚开始学习一些关于移动端的知识，还只是个小白，文中可能有许多理解错误，望指出，请多多见谅。 响应式 什么是响应式页面呢？ 顾名思义响应式页面就是能做...
摘要：所以一个网，甚至是响应式设计，在两个平台上都会损害您整体的。三响应式与如果把网站作为一个单独的网站，如果网站的内容与桌面版的内容相对缺少，导致用户回到桌面端的网站，会记录这种选择，使搜索排名降低，国内百度就不知道会怎样。 一、为什么需要响应式设计（responsible web design） 1. 响应式发展背景 1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以...
摘要：今天在这里就略微谈一下响应式布局吧想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一接下来我们从小到大来谈谈响应式网页设计的基本原则为什么为什么需要响应式设计想必这点不说大家都能想到答案现在是一个移动为先的时代我们要 今天在这里就略微谈一下响应式布局吧,想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一,接下来我们从小到大来谈谈响应式网页...
摘要：虽然兼容性方案的体验不如常规方案，但保证了功能可用性移动优先的响应式布局采用的是渐进增强原则，制作响应式网站时，先搞定手机版，然后再去为更大设备去设计和开发更复杂的功能。前面的话 随着移动互联网的兴起，不同设备的分辨率相差较大，如果在不同的设置上显示同一个页面，则用户体验差。响应式网页设计是一种方法，使得一个网站能够兼容多个终端，而不用为每个终端制作特定的版本。它使得一个网站可以在任何类...
摘要：接下来做端一般都写手机最大也就先隐藏手机菜单和按钮优先级问题解决方法直接使用用谷歌开发者工具查看优先级里面的垂直居中再把写成布局只要改成里面的子项目就变成一行了菜单导航导航导航导航导航到航导航导航导航导航方法切换元素的可见状态。 CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你...
阅读 1862·2021-11-24 09:39
阅读 2341·2021-09-30 10:00
阅读 3337·2021-09-22 10:54
阅读 5130·2021-09-07 10:28
阅读 2789·2019-08-29 13:53
阅读 615·2019-08-29 12:42
阅读 816·2019-08-26 13:51
阅读 1132·2019-08-26 13:32
