在响应式布局中,碰到图片不会自动缩放,因此需要一段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在市场当中仍然 ...
随机推荐
- python多线程的几种情形分析-三种情况
情形一:默认情况 默认情况,只开启线程,那么,主线程结束,其他子线程可能还没结束. 只使用t=threading.Thead(target=fun),t.start(). import threadi ...
- linux目录及文件命令学习
学习Linux 目录操作 1.pwd 可以看当前目录路径 2.cd change directory 改变目录,切换目录 cd / 进入跟目录 cd ..返回上级目录 cd 进入用户主目录 cd .. ...
- php的注释方法
注释是每个程序员学习时的基础,我们通过可以注释来备注一信息.增加代码的可读性.下面我们就为大家介绍一下PHP的注释方法. 1, // 这是单行注释 2,# 这也是单行注释 3,/* */多行注释块 ...
- Swift——(六)Swift中的值类型
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/twlkyao/article/details/34855597 在Swift中,结构体和枚举 ...
- SqlServer表名称定义
每一个数据表 添加一个 扩展 属性:Description 填写表描述. 查看是否所有表都添加的Sql如下: SELECT a.name AS name, g.[value] FROM sys.ta ...
- 案例:使用xml存储数据
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- java 多线程间通信(二)
传统的线程通信 Object提供了三个方法wait(), notify(), notifyAll()在线程之间进行通信,以此来解决线程间执行顺序等问题. wait():释放当前线程的同步监视控制器,并 ...
- 【知识强化】第五章 输入/输出(I/O)管理 5.1 I/O管理概述
这门课的最后一个章节——设备管理. 操作系统它作为系统资源的管理者,既需要对上层的软件进行管理,也需要对下层的硬件进行管理.操作系统它需要对处理机还有存储器这些硬件进行管理,但是这些硬件其实是在计算机 ...
- CSS中表示颜色的4种方法
#1:直接用颜色名称 #2:十六进制数 #3:RGB整数设置颜色 0-255 #4:RGB百分数设置颜色0%-100%
- 通过cmd命令启动appium server,appium server安装过程
电脑上已安装了appium desktop版,想在移动端自动化的过程中,通过脚本启动appium server,环境准备: 1.确保电脑安装了node.js,目前用的是node12 2.安装JDK,且 ...