html基值 仿淘宝
$(function(){
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
});
1)布局的时候,各元素的css尺寸=psd上元素的尺寸/(设计稿横向总宽/10)。
2)font-size可能需要额外的媒介查询,并且font-size不使用rem。
拿淘宝来说的,他们用的设计稿是750的,所以html的font-size就是75,如果某个元素时150px的宽,换算成rem就是150 / 75 = 2rem。
注:
跟网易一样,淘宝也设置了一个临界点,当设备竖着时横向物理分辨率大于1080时,html的font-size就不会变化了,原因也是一样的,分辨率已经可以去访问电脑版页面了。
html基值 仿淘宝的更多相关文章
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
- 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。
前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...
- 转::iOS 仿淘宝,上拉进入详情页面
今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...
- Vue实现仿淘宝商品详情属性选择的功能
Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrA ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》
高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...
- android版高仿淘宝客户端源码V2.3
android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
随机推荐
- Wamp设置虚拟目录
1. 默认安装 wamp后,工作目录为"..../wamp/www" 也就是PHP文件只有放在此目录下才能打得开,打开Apache的配置文件httpd.conf可以看到: 这么两行 ...
- Java的IO输入输出流类的介绍(有图)
一.字节流 1.InputStream/OutputStream(输入流与输出流几乎一一对应) 读取的方法 int read() int read(byte[] buffer) int r ...
- jmeter(5)——参数化
之前接触过QTP或者Loadrunner的小伙伴,应该对参数化不陌生,在<badboy详解篇>中也介绍了badboy的参数化,今天说一下jmeter的参数化,同样,我们举例说明,以msn. ...
- VS 同词高亮显示
Visual Studio 2010 选中高亮插件 - Highlight all occurrences of selected word Highlight all occurrences of ...
- android添加系统(服务、应用)
1. 添加系统服务 1.1 添加方式1:(不加入servicemanager统一管理的) 看Android6.0.1 init.rc解析中的第2章和第3章 方式1: 1). 写一个测试脚本test.s ...
- 基于bootstrap的图片轮播功能
插入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <scri ...
- 我的Java编码规范
1.类名采用驼峰命名法,首字母大写. 2.类变量采用驼峰命名法,首字母小写. 3.方法名是一个动词短语,首字母小写,尽量能描述清楚这个方法的意图. 4.注释在精不在多,一个好的注释要尽量描述出这段代码 ...
- 深入理解javascript原型和闭包_____全部
http://www.cnblogs.com/wangfupeng1988/p/3977924.html
- mac下配置环境变量-mongo
一 1打开终端查看echo $PATH所有环境变量会显示2输入sudo vi ~/.bash_profile回车后输入密码,然后到达vim查看状态3输入i改为编辑态,在后面追加路径4按esc然后shi ...
- 移动端mate标签设置
<meta name="viewport" content="width=device-width,height=device-height,initial-sca ...