页面高度自适应方法(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);
});
把上面代码贴出来,供大家使用。
页面高度自适应方法(PC、移动端都适用)的更多相关文章
- swiper 不同页面高度自适应
在使用swiper写页面滑动时发现不同页面高度无法自适应,使用autoHeight:true也不起作用 研究了一下发现可以这样设置 .swiper-slide{ overflow: hidden; } ...
- 非一屏页面,出现遮罩层页面位置不动,并且遮罩层一屏显示。(pc,移动端都适用的方法)
首先展示页面效果: 遮罩没出现的页面张酱紫:页面在楼层二这个位置. 遮罩显示:后面页面页面任停留在当前浏览位置,滚动条并未回顶部 下面来说说写法: css: 页面具体布局样式......(此处省略无数 ...
- iframe高度自适应方法
<iframe width="100%" id="tbbrecommend" name="tbbrecommend" src=&quo ...
- html页面高度自适应
本文实现的效果是依据浏览器分辨率的不同.页面底端背景色自适应浏览器高度,也就是能够自己主动填充背景色. <script type="text/javascript"> ...
- tabs高度自适应方法
1.去掉easyui-tabs类属性,改为id=tabs 2.用js控制高度
- iframe父页面和子页面高度自适应
父页HTML: <iframe id="mainframe" name="mainframe" style="width:100%;&quo ...
- iframe高度自适应方法大全
http://www.3tii.com/993.html http://caibaojian.com/iframe-adjust-content-height.html http://www.jb51 ...
- vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)
<template> <div class="card-index pt-relative"> <div id="wrapper ...
- textarea如何实现高度自适应?
今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时, ...
随机推荐
- web前端校招笔试题集锦
写一个求和的函数sum,达到下面的效果 // Should equal 15 sum(1, 2, 3, 4, 5); // Should equal 0 sum(5, null, -5); // Sh ...
- iphone开发学习之路--基本语法
关键字:Objective-C(以下简称O-C)是C语言的一个超集,也就是C语言的语法O-C都是兼容的,所以为了避免冲突O-C的关键字都是以@符号开始的,比如:@class.@public .@try ...
- python3下应用pymysql(第一卷)
编程不会操作数据库,就像男人做做了太监,人生不完整,我不想人生不完整,写下pymysql的使用总结 先做下准备工作,准备下数据表,由于是练习操作,所以先做个简单的数据表: 创建单独的一个库:再创建表 ...
- Servlet与JSP概念理解
Servlet是用Java编写的服务端程序.需要部署到servlet容器上才能运行,tomcat 就是一个servlet容器. 1.Servlet的生命周期 客户端请求该 Servlet --> ...
- Hessian简介
Hessian Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为 ...
- python基础之文件操作1
文件操作:os.mknod("test.txt") 创建空文件fp = open("test.txt",w) 直接打开一个文件,如果文件不 ...
- 《自动化平台测试开发-Python测试开发实战》第2次印刷
书籍货源比较紧张.紧张啊,如此短的时间,已经第2次印刷.第2次印刷. 第2次印刷. 同时该书已确认与台湾出版社合作翻译成繁体版,甚至有可能与国外出版社合作翻译成英文版. 2018年7月 第1次印刷 2 ...
- Java设计模式(二十一):职责链模式
职责链模式(Chain Of Responsibility Pattern) 职责链模式(Chain Of Responsibility Pattern):属于对象的行为模式.使多个对象都有机会处理请 ...
- http 详解
HTTP协议中GET.POST和HEAD的介绍 GET: 请求指定的页面信息,并返回实体主体. HEAD: 只请求页面的首部. POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体 ...
- spring入门-整合junit和web
整合Junit 导入jar包 基本 :4+1 测试:spring-test-5.1.3.RELEASE.jar 让Junit通知spring加载配置文件 让spring容器自动进行注入 1234567 ...