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了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
随机推荐
- Java的IO输入输出流类的介绍(有图)
一.字节流 1.InputStream/OutputStream(输入流与输出流几乎一一对应) 读取的方法 int read() int read(byte[] buffer) int r ...
- C++的中英文字符串表示(string,wstring)
在C++中字符串类的string的模板原型是basic_string template <class _Elem, class traits = char_traits<_Elem> ...
- 有标号的DAG计数 II
Description 给定一正整数n,对n个点有标号的有向无环图(可以不连通)进行计数,输出答案mod 998244353的结果 Solution 考虑 \(O(n^2)\) DP 枚举出度为 \( ...
- Centos7 部署.netCore2.0项目
最近在学习.netCore2.0,学习了在Centos上部署.netCore的方法,中间遇到过坑,特意贴出来供大家分享,在此我只是简单的在CentOS上运行.NETCore网站,没有运用到nginx等 ...
- Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)
在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...
- Access入门 2010,数学
Access入门 2010(高级窗体) 1,创建数据透视图:创建---其他窗体---数据透视图---图标字段列表---选择列表内容---移动到数据透视图的对应位置---完成. 2,创建数据透视表窗体: ...
- java导入excle表格,并且对表格进行相应的修改,并对表格数据进行整理,最后导出本地表格等一系列操作
1.首先创建一个java项目 完成效果如下图所示 2.导入以下jar包 3.代码如下 其中行和列的操作是根据需求自动划分的 public class auto_date { private stati ...
- JFrame自适应大小
pack();函数调用PreferedSize(); 所以对于组件要setPreferedSize();
- https、公钥、私钥白话解说
原文 摘要:本文尝试一步步还原HTTPS的设计过程,以理解为什么HTTPS最终会是这副模样.但是这并不代表HTTPS的真实设计过程.在阅读本文时,你可以尝试放下已有的对HTTPS的理解,这样更利于“还 ...
- rabbitMQ windows 安装 入门(转)
rabbitMQ windows 安装 入门 1.下载,其实erlang不装也是可以的 下载 rabbitMQ :http://www.rabbitmq.com/download.html,安装r ...