<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth > 640) {
clientWidth = 640;
}
docEl.style.fontSize = 10 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>

添加这端代码之后,图片就会跟随这屏幕的大小从而进行缩放。

在响应式布局中,碰到图片不会自动缩放,因此需要一段js脚本的更多相关文章

  1. 响应式布局中的CSS相对量

    一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...

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

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

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

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

  4. rem在响应式布局中的应用

    rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...

  5. css中响应式布局中样式的代码书写方法

    代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...

  6. css3响应式布局

    响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...

  7. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  8. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...

  9. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

随机推荐

  1. 将本地图片数据制作成内存对象数据集|tensorflow|手写数字制作成内存对象数据集|tf队列|线程

      样本说明: tensorflow经典实例之手写数字识别.MNIST数据集. 数据集dir名称 每个文件夹代表一个标签label,每个label中有820个手写数字的图片 标签label为0的文件夹 ...

  2. Windows重置网络命令

    我们在日常使用电脑的时候会碰到网络异常,网络故障,想要针对性地去解决是很困难的. 有时候可能查遍了资料,花了大量时间,怎么搞都还是搞不定.所以,这次直接给大家分享一个通过重置网络来解决所有问题的方法. ...

  3. 关于ExtJS对javascript中的Object的扩展

    关于ExtJS对javascript中的Object的扩展,可以参考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 下 ...

  4. Ajax 中Post 与 Get的 实例

    Ajax中 Post 与 Get 实例   Ajax的POST实例,index.html <html> <head> <script type="text/ja ...

  5. C++继承中的构造和析构

    1,构造:对象在创建的后所要做的一系列初始化的工作: 析构:对象在摧毁之前所要做的一系列清理工作: 2,思考: 1,子类中如何初始化父类成员? 1,对于继承而言,子类可以获得父类的代码,可以获得父类中 ...

  6. kmp next数组的模板

    string s; int Next[MAX]; int len; void get_next() { ,j=-; Next[i]=j;//初始化,next[0]=-1:-1表示没有前缀等于后缀. ; ...

  7. JQ广告弹窗&随机抽奖————JQ

    1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <scri ...

  8. 2019HDU多校第一场 BLANK DP

    题意:有四种数字,现在有若干个限制条件:每个区间中不同的数字种类必须是多少种,问合法的方案数. 思路: 定义 dp[i][j][k][t] 代表填完前 t 个位置后,{0,1,2,3} 这 4 个数字 ...

  9. 一次goldengate故障引发的操作系统hang起,HA自动切换

    现场: 跑着数据库的主机A报警应用连接不上数据库,我们无法ssh到主机.第一反应是通过telnet到远程控制口,发现数据库资源和硬件资源在被切换到HA架构的主机B(备机,通常性能比主机A的差,抗不住应 ...

  10. Mongo导出、导入

    1.mongodb 数据导出: connection options: /h, /host:<hostname> mongodb host to connect to (setname/h ...