苏宁易购WAP的meta分析

响应式

  meta设置

    

    媒体查询时读的width为viewport的宽度。viewport宽度为手机分辨率。比如note2 1280*720.需要重置为设备 640*360

方式

类型 css javascript
原理 媒体查询宽、高范围。设置html的font-size基准值 (window.innerWidth/psd的初始化宽度)*psd的初始font-size。算出当前网页的font-size。赋给html
特征 优点: 纯css解决 缺点: 需要在页面渲染前,阻塞浏览器。
部分旧手机浏览器,需内嵌JS代码才能保证阻塞。
缺点: 因为是范围,不能精确适配。如果新增一种主流手机,离范围的边界较远,需要为它重新划定范围 优点
非常精确

  css响应式 

    范围的选择是根据需要适配的主流手机分辨率来定,尽量让主流手机接近范围边界。并非按规律递增。 

/*
rem方式,750px 为psd基准宽度,50px为font-size基准大小。 body设置的是默认字体大小
*/ html{font-size:50px;}
body{font-size:24px;}
@media screen and (min-width:320px){
html{font-size:.333333333333332px;}
body{font-size:12px;}
}
@media screen and (min-width:360px){
html{font-size:24px;}
body{font-size:12px;}
}
@media screen and (min-width:375px){
html{font-size:25px;}
body{font-size:12px;}
}
@media screen and (min-width:384px){
html{font-size:.6px;}
body{font-size:14px;}
}
@media screen and (min-width:400px){
html{font-size:.666666666666668px;}
body{font-size:14px;}
}
@media screen and (min-width:414px){
html{font-size:.6px;}
body{font-size:14px;}
}
@media screen and (min-width:424px){
html{font-size:.266666666666667px;}
body{font-size:14px;}
}
@media screen and (min-width:480px){
html{font-size:32px;}
body{font-size:.36px;}
}
@media screen and (min-width:540px){
html{font-size:36px;}
body{font-size:.28px;}
}
@media screen and (min-width:720px){
html{font-size:48px;}
body{font-size:.04px;}
}
@media screen and (min-width:750px){
html{font-size:50px;}
body{font-size:24px;}
}

  js响应式


/*
rem方式,640px 为psd基准宽度,16px为font-size基准大小。
*/
function _adaptFont(maxWidth, baseWidth,baseSize){
maxWidth = maxWidth || ;//最大值640px
baseWidth = baseWidth || ;
baseSize = baseSize || ;
var winWidth = parseInt(window.innerWidth); /*s4手机读到的winWidth是分辨率的宽*/
var docWidth = parseInt(document.documentElement.clientWidth); //和winWidth区别是,减去右边滚动条
var bodyWidth = parseInt(document.body.clientWidth); //混合模式下使用
var docWidth = Math.min(winWidth, bodyWidth, docWidth);
docWidth > maxWidth && (docWidth = maxWidth); //设置基准值
document.documentElement.style.fontSize = (docWidth/baseWidth)*baseSize + 'px'; }
_adaptFont();
window.addEventListener("resize",_adaptFont);

移动端网页meta设置和响应式的更多相关文章

  1. 项目新的需求,网页的自适应交付/响应式交付 Responsive/Adaptive Delivery

    网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...

  2. pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

  3. 移动端web网页meta设置

    <meta charset='utf-8'><!-- 声明文档使用的字符编码 --> <meta http-equiv="X-UA-Compatible&quo ...

  4. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  5. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  6. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  7. 响应式布局与bootstrap框架

    原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...

  8. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  9. 【温故知新】——Bootstrap响应式知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...

随机推荐

  1. 浏览器特性检测插件Feature.js

    <script src="js/feature.js"></script> if (feature.webGL) { console.log("你 ...

  2. 为JQuery EasyUI 表单组件增加“焦点切换”功能

    1.背景说明 在使用 JQuery  EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabinde ...

  3. android studio 2.3 下载地址

      android studio下载:  Windows+SDK:(1.8GB)| Windows(428 MB) | Linux    idea  win.exe  win.zip 序号 名称 中文 ...

  4. 【R】正态检验与R语言

    正态检验与R语言 1.Kolmogorov–Smirnov test 统计学里, Kolmogorov–Smirnov 检验(亦称:K–S 检验)是用来检验数据是否符合某种分布的一种非参数检验,通过比 ...

  5. Elasticsearch搜索之best_fields分析

    顾名思义,best_field就是获取最佳匹配的field,另个可以通过tie_breaker来控制其他field的得分,boost可以设置权重(默认都为1). 下面从宏观上来讲的简单公式: scor ...

  6. Xamarin.Forms+Prism(3)—— 简单提示UI的使用

    这次给大家介绍两个比较好用的提示插件,如成功.等待.错误提示. 准备: 1.新建一个Prism Xamarin.Forms项目: 2.右击解决方案,添加NuGet包: 1)Acr.UserDialog ...

  7. 《阿里巴巴Java开发手册(正式版》读记

    前几天,阿里巴巴发布了<阿里巴巴Java开发手册(正式版>,第一时间下载阅读了一番. 不同于一般大厂内部的代码规范,阿里巴巴的这本Java开发手册,可谓包罗万象,几乎日常Java开发中方方 ...

  8. 好看的复选框(Checkbox)效果

    在线演示      源码下载

  9. Akka(1):Actor - 靠消息驱动的运算器

    Akka是由各种角色和功能的Actor组成的,工作的主要原理是把一项大的计算任务分割成小环节,再按各环节的要求构建相应功能的Actor,然后把各环节的运算托付给相应的Actor去独立完成.Akka是个 ...

  10. C++STL中map容器的说明和使用技巧(杂谈)

    1.map简介 map是一类关联式容器.它的特点是增加和删除节点对迭代器的影响很小,除了那个操作节点,对其他的节点都没有什么影响.对于迭代器来说,可以修改实值,而不能修改key. 2.map的功能 自 ...