<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. appium常见问题10_MAC_终端输入aapt指令报错提示"command not found"

    问题: MAC终端使用aapt指令"aapt dump badging xxx/xxx/xxx.apk"查看apk包名和activity时报错提示"command not ...

  2. idea新手教程 如何springmvc创建Maven项目

    1.点击Create project,选择maven,勾选Create from archetype选择web-app,如图 2 输入    Group-Id     //组织名,也是作者名 Arti ...

  3. linux 部署系统通过SecureCRT启动tomcat 控制台中文乱码

    查资料又是查了半天 首先 查看linux 当前系统字符集命令 echo $LANG 查看linux 当前系统语言 locale 网上说的又是下中文包,又是改临时语言,这些不能一概而论,我也觉得我不是中 ...

  4. git 上传本地代码

    新增本地代码到远程库 http://blog.csdn.net/hanhailong726188/article/details/46738929 github配置教程 http://www.runo ...

  5. 小议ArcMap面转线的几种方式

    ArcMap是一个功能丰富的复杂系统,但凡对它有些认知的会同意这个观点. 它的丰富与复杂体现在一个objective有多种implementation,还体现在多种implementation有类似的 ...

  6. 第一节 初识RabbitMQ

    原文:第一节 初识RabbitMQ 版权声明:未经本人同意,不得转载该文章,谢谢 https://blog.csdn.net/phocus1/article/details/87280120 1.什么 ...

  7. Hibernate4教程二:基本配置

    可编程的配置方式一: 如果在配置cfg.xml的时候,不想在里面配置hbm.xml怎么办呢?可在程序里使用可编程的配置方式,也就是使用程序来指定在cfg.xml里面的配置信息,不推荐这种方式.如下: ...

  8. 七、hibernate的事务使用

    hibernate中事务隔离级别 1:读未提交 2:读已提交 4:可重复读 8:可串行化 hibernate事务使用 在核心配置文件中配置事务隔离级别 <property name=" ...

  9. Xfce4: 显示/隐藏 休眠/混合睡眠/挂起 按钮

    可以在xfconf配置项中创建如下属性控制: xfconf-query -c xfce4-session -np '/shutdown/ShowHibernate' -t 'bool' -s 'fal ...

  10. Harbor私有镜像仓库(下)

    Harbor私有镜像仓库(下) 链接:https://pan.baidu.com/s/1MAb0dllUwmoOk7TeVCZOVQ 提取码:ldt5 复制这段内容后打开百度网盘手机App,操作更方便 ...