function sWidth() {//计算当前设备宽度
var widthSize;
if ($(window).width() <= 640) {
widthSize = $(window).width()
}
if ($(window).width() > 640) {
widthSize = 640
}
$('html').css({'font-size': widthSize, 'width': widthSize, 'margin': '0 auto'});
$(window).resize(function () {//当浏览器窗口发生改变时,再一次调整界面布局:参考单位(rem)
if ($(window).width() <= 640) {
widthSize = $(window).width()
}
if ($(window).width() > 640) {
widthSize = 640
}
$('html').css({'font-size': widthSize, 'width': widthSize, 'margin': '0 auto'});
});
}

jquery 设置 html标签响应式布局的更多相关文章

  1. 响应式布局中重要的meta标签设置.适用于手机浏览器兼容性设置

    <!-- #手机浏览器兼容性设置 -->    <meta content="application/xhtml+xml;charset=UTF-8" http- ...

  2. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  3. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  4. 【课程分享】ASP.NET MVC5&amp;微信公众平台整合开发实战(响应式布局、JQuery Mobile,Windows Azure、微信核心开发)

    对这个课程有兴趣的,能够联系我QQ2748165793 基础知识储备 ASP.NET MVC 5基础(6讲) 第一讲-初识ASP.NET MVC并搭建整合开发环境 第二讲-深入MVC开发模式 第三讲- ...

  5. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  6. rem+js响应式布局的设置

    直接调用代码即可,不过不同屏幕宽度要求会不同,相应修改一下就ok了 // rem响应式布局 (function(){ var html=document.querySelector('html') h ...

  7. 响应式布局中为什么要使用em设置字体大小而不用px

    px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...

  8. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. 前端基础之BOM和DOM(响应式布局、计时器、搜索框、select联动)

    一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...

随机推荐

  1. Activiti流程定义部署、删除

    1.部署流程定义 部署流程定义也可以认为是增加流程定义.  首先创建流程引擎对象(公用的方法)   private ProcessEngine processEngine = ProcessEngin ...

  2. elasticsearch 中文API(一)

    Java API 这节会介绍elasticsearch支持的Java API.所有的elasticsearch操作都使用Client对象执行.本质上,所有的操作都是并行执行的. 另外,Client中的 ...

  3. Luogu P4933 大师(dp)

    P4933 大师 题意 题目背景 建筑大师最近在跟着数学大师ljt12138学数学,今天他学了等差数列,ljt12138决定给他留一道练习题. 题目描述 ljt12138首先建了\(n\)个特斯拉电磁 ...

  4. 【NOIP2013模拟联考7】OSU

    [NOIP2013模拟联考7]OSU 描述 Description osu 是一款群众喜闻乐见的休闲软件. 我们可以把osu的规则简化与改编成以下的样子: 一共有n次操作,每次操作只有成功与失败之分, ...

  5. php循环语句(一)

    PHP 循环语句 什么是循环语句? 在不少实际问题中有许多具有规律性的重复操作,因此在程序中就需要重复执行某些语句.一组被重复执行的语句称之为循环体,能否继续重复,决定循环的终止条件.循环结构是在一定 ...

  6. ACM中Java使用注意事项

    1. String 类用来存储字符串,可以用charAt方法来取出其中某一字节,计数从0开始, 而不是像C/C++那样使用 []访问是每个字符. 2. 在主类中 main 方法必须是 public s ...

  7. <form>(表单)标签和常用的类型

    1.定义和用法 <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.texta ...

  8. 新闻内页 上一篇写一篇问题,ID不连续,不用链表

    y要什么链表? 用sql查询上一篇 SELECT id,title FROM t_article WHERE id<10 ORDER BY id DESC LIMIT 1; 用sql查下一篇 S ...

  9. Spring Boot入门样例-001-Java和Maven安装配置

    Spring Boot入门样例-001-Java和Maven安装配置 本文说明Java和Maven在windows下的安装和配置 前言 本Spring Boot入门样例准备工作参考: Spring B ...

  10. Python实现十大经典排序算法(史上最简单)

    十大排序算法(Python实现)一. 算法介绍及相关概念解读 算法分类十种常见排序算法可以分为两大类: 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn), ...