在响应式布局中,碰到图片不会自动缩放,因此需要一段js脚本
<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脚本的更多相关文章
- 响应式布局中的CSS相对量
一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...
- 响应式布局中为什么要使用em设置字体大小而不用px
px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...
- 响应式布局中重要的meta标签设置.适用于手机浏览器兼容性设置
<!-- #手机浏览器兼容性设置 --> <meta content="application/xhtml+xml;charset=UTF-8" http- ...
- rem在响应式布局中的应用
rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point,是印刷行业常用单位,等于1/72英寸 rem ...
- css中响应式布局中样式的代码书写方法
代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...
- css3响应式布局
响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- Bootstrap实战 - 响应式布局
一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
随机推荐
- 10. Jmeter-后置处理器一
jmeter-后置处理器介绍与使用一 今天我们先讲 CSS/JQuery Extractor JSON Extractor Boundary Extractor 正则表达式提取器 CSS/JQuery ...
- 购物车1.0版——python第5天
# 输出商品列表,用户输入序号,显示选中商品名称# 商品li = ['手机', '电脑', '耳机', '键盘', '鼠标']# 要求:1.页面显示序号+商品名称如下# 1 手机# 2 电脑# 3 耳 ...
- java.lang -> Boolean
java.lang -> Boolean 是什么 Boolean 类是将 boolean 基本类型进行包装.类型为 Boolean 的对象包含一个单一属性 value,其类型为 boolean. ...
- Learning OSG programing---osgClip
OSG Clip例程剖析 首先是创建剪切节点的函数代码: osg::ref_ptr<osg::Node> decorate_with_clip_node(const osg::ref_pt ...
- 使用 QSqlTableModel 模型向数据库中插入数据时,为什么使用 rowCount 函数只能返回 256 最大值?
默认返回缓冲区里面的数据,如果你向要获取更多值,请在前面加入以下语句即可. while(model.canFetchMore()){ model.fetchMore(); } 该语句会获取更多的记录.
- 64.二叉搜索树的第K个节点
题目描述: 给定一棵二叉搜索树,请找出其中的第k小的结点.例如, (5,3,7,2,4,6,8) 中,按结点数值大小顺序第三小结点的值为4. 思路分析: 根据二叉搜索树的特殊性,我们中序遍历它 ...
- 43.和为S的连续正数序列
题目描述: 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多 ...
- JS面向对象——构造函数模型
ECMAScript中的构造函数可用来创建特定类型的对象.我们可以创建自定义构造函数,从而定义对象类型的属性和方法,解决工厂模型中对象识别的问题. <!DOCTYPE html> < ...
- 配置进程外Session 同时解决一个奇怪的BUG 因为SQLserver 服务器名不是默认的.或者localhost而引发的一系列问题
用公司的电脑学习如鹏网的视频,开发一个项目,用到了进程外session,因为公司电脑SQLServer 是2008 服务器名称是. 然后参考这篇文章进行设置进程外session 很顺利 完成了设置. ...
- LeetCode Array Easy 414. Third Maximum Number
Description Given a non-empty array of integers, return the third maximum number in this array. If i ...