页面高度自适应方法(PC、移动端都适用)

有个项目移动端的首页需要自适应。

宽度已经自适应了 , 高度也要自适应 ,先总结一下方法,PC端也适用。

$(function(){
var h = window.innerHeight;
$(".carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img").css("height",h*0.32);
$(".database-con .col-xs-6 a").css("height",h*0.16);
$(".search-bg").css("height",h*0.12);
$(".home-footer").css("height",h*0.08);
});

把上面代码贴出来,供大家使用。

原文地址:https://www.cnblogs.com/snowhite/p/11411682.html

时间: 2024-07-30 04:18:34

页面高度自适应方法(PC、移动端都适用)的相关文章

vrops更改仪表板页面高度的方法

vrops更改仪表板页面高度的方法   将仪表板导出  修改字段"h" 原文地址:https://blog.51cto.com/sampsondotqiu/2473253

html页面高度自适应

本文实现的效果是根据浏览器分辨率的不同,页面底端背景色自适应浏览器高度,也就是可以自动填充背景色. <script type="text/javascript"> function height_adaptive(){ var main=$(document).height(); var title=document.getElementById("login_title").scrollHeight; var body=document.getElem

页面的自适应方法总结

一.使用前端框架,如bootstrap响应式布局,推荐使用 二.包裹一个容器,设置一个固定宽度如1200px,并设置居中,里面的内容可以写具体的px值,不同电脑显示的两边的空白大小不一样. 三.使用百分比,各个部分都使用百分比.这种编码难度大,难以掌控,测试困难,一般少用. 四.针对不同分辨率写不同css文件,不推荐使用.(包含媒体查询media) 五.用js/jquery动态调整一些值的大小,但是页面上较多元素都会变形的情况不推荐使用. 六.百分比和em结合使用. 七.使用rem来作为单位写样

跨域和非跨域 获取iframe页面高度的方法

跨域方法: 第一步,在主页面里插入代码://假设主域名是www.aaa.com  需要插入的跨域域名为www.bbb.com <iframe src="http://www.bbb.com/index.html" width="100%" height="100%" id="iframepage" name="iframepage" onLoad="iFrameHeight()"

iframe标签父页面高度自适应

注意:页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <iframe id="mainFrame" name="mainFrame" scrolling="no" src=

两个DIV高度自适应方法(左右两个DIV高度一样)

html:<div id="container"> <div id="leftSide"> <p>aaaa</p> <p>aaaa</p> </div> <div id="rightSide"> </div> </div> 1.负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(nu

ifram的高度自适应方法

1.首先,在主页面上使用iframe引入子页面: 注意:这个子页面的id为Iframe 2.在子页面中再引入一个孙页面,并讲子页面的宽高信息传给孙页面: 具体代码内容为: <script type="text/javascript"> (function autoHeight(){ var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth); var b_height = Math.

vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

<template> <div class="card-index pt-relative"> <div id="wrapper" :style="'height:'+Height+'px;'"> <iframe v-if="iframeType" :src="srcUrl" sandbox="allow-forms allow-same-origin a

iframe的跨域高度自适应(通过跨域页面中嵌套本域页面)

实习不久接到一个任务,在网页中嵌套另一个工程的网页.本以为这是轻而易举的一件事情,结果被测试姐姐折腾得够呛.多次和我谈心说到这个高度固定导致iframe出现滚动条有多么不好看,对于工程整体的影响有多么恶劣.因为跨域的原因,这个需求被拖了许久,真是很痛苦的一件事.最终在我离开公司之前搞定了这个单. 这里就把我的研究过程写下来以供大家参考. 首先需要了解一下何为同域,何为跨域: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名