在响应式布局中,碰到图片不会自动缩放,因此需要一段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在市场当中仍然 ...
随机推荐
- 用其他音乐源帮帮网易云,Windows听歌利器
镜像文章 1.用其他音乐源帮帮网易云,Ubuntu听歌利器 2.用其他音乐源帮帮网易云,Android听歌利器 只剩下Windows端了,一并送上. 1.Windows懒人版 1.1第一种懒人方法 下 ...
- addr2line探秘 [從ip讀出程式中哪行出錯]
addr2line探秘 在Linux下写C/C++程序的程序员,时常与Core Dump相见.在内存越界访问,收到不能处理的信号,除零等错误出现时,我们精心或不精心写就的程序就直接一命呜呼了,Core ...
- Java开发中的23种设计模式详解(3)行为型
本章是关于设计模式的最后一讲,会讲到第三种设计模式--行为型模式,共11种:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.访问者模式.中介者模式.解释器模 ...
- ORM--SqlSugar
这个是很久之前就开始用的一款ORM,挺好用的,推荐~ 关键词: SqlSugar:一款小巧,并且功能齐全的ORM 参考手册网址:http://www.codeisbug.com/Home/Doc 多表 ...
- 2018-5-26-Latex-去掉行号
title author date CreateTime categories Latex 去掉行号 lindexi 2018-05-26 10:32:25 +0800 2018-2-13 17:23 ...
- 2019-9-2-win10-uwp-隐私声明
title author date CreateTime categories win10 uwp 隐私声明 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 1 ...
- 企业微信上传 带中文名称的 临时素材资源 报错 44001:empty media data
错误原因:urllib3的老版本bug,卸载掉 requests,urllib3,从新安装最新版的requests(此包内部依赖urllib3): 我从新安装的是 requests==2.22.0 及 ...
- [几何]计算不规则多边形的面积、中心、重心(Android,转)
转自:[几何]计算不规则多边形的面积.中心.重心 最近项目用到:在不规则多边形的中心点加一个图标.(e.g: xx地区发生暴雪,暴雪区域是多边形,给多边形中心加一个暴雪的图标) 之前的设计是,计算不规 ...
- oracle中sys,system,scott,hr用户
https://blog.csdn.net/xingfeng0501/article/details/6699390 scott 是个演示用户,是让你学习ORACLE用的 hr用户是个示例用户,是在创 ...
- NVMe SSD是什么?
https://blog.51cto.com/alanwu/1766945 一直对闪存存储关注的朋友对NVMe SSD一定非常熟悉,NVMe SSD是现如今性能最好的存储盘.这种高性能盘在互联网领域已 ...