js实现屏幕自适应局部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
div{
margin:0 auto;
height:10000px;
min-width:880px;
max-width:1100px;
background:#060;
clear:both;
}
ul{}
li{
float:left;
display:inline;
width:198px;
height:198px;
border:1px solid #ccc;
margin:10px;
}
</style>
</head> <body>
<div id="main">
<ul>
<li>11111111111</li>
<li>2222222222</li>
<li>33333333333</li>
<li>4444444444</li>
<li>55555555555</li>
<li>666666666</li>
<li>77777777777</li>
<li>888888888888</li>
<li>999999999</li>
<li>00000000000</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <script>
var winWidth;
window.onload=function(){
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
if(winWidth<=1100)
document.getElementById("main").style.width="880px";
else if(winWidth>=1100)
document.getElementById("main").style.width="1100px";
}
window.onresize=function(){
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
if(winWidth<=1100)
document.getElementById("main").style.width="880px";
else if(winWidth>=1100)
document.getElementById("main").style.width="1100px";
}
</script>
</body>
</html>
js实现屏幕自适应局部的更多相关文章
- vue-cli 项目里屏幕自适应
很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible．那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目 ...
- vue-cli中配置屏幕自适应（px2rem）
在vue-cli中配置屏幕自适应的方法 首先,我们需要安装flexible库． npm i lib-flexible --save 在index.html文件当中配置meta标签, <meta ...
- 有了这套flexible.js 移动端自适应方案，你就能在移动端的来去自如， (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- vue-cli脚手架里如何配置屏幕自适应
很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible．那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目 ...
- vant vue 屏幕自适应
手机端 pc端 屏幕自适应 一.新建 vue.config.js项目目录中没有 vue.config.js 文件,需要手动创建,在根目录中创建 vue.config.js const pxtorem ...
- [Unity3D]NGUI用Sprite动画和屏幕自适应做游戏开始场景
我们在玩任何一款手游产品时,都是先上来个logo界面,游戏欢迎界面等,这就意味着我们要做一款游戏需要多个场景,场景之间来回切换实现游戏逻辑,unity也不例外,所以从本篇开始将会介绍如何搭建多个场景, ...
- 4种必须知道的Android屏幕自适应解决方案
文章来源:http://blog.csdn.net/shimiso/article/details/19166167 demo下载:http://www.eoeandroid.com/forum.ph ...
- NGUI屏幕自适应
NGUI确实是非常棒的一个做界面的插件,比起U3D自带的GUI要好很多,当然也有一些不好之处,毕竟什么都不可能那么完美. 最近在用Unity写游戏使用NGUI遇到了一个很多人都在遇到的问题,就是关于屏 ...
- 【Cocos2d-x 3.x】屏幕自适应匹配
在进行游戏开发时, 由于市场上的Android移动设备的分辨率有很多种,而且IOS移动设备的分辨率也不相同,为了能让手游能在90%以上的移动设备较为完美的运行,因此需要考虑屏幕的自适应问题,让一套资源 ...
随机推荐
- UVA-10534 (LIS)
题意: 给定一个长为n的序列,求一个最长子序列,使得该序列的长度为2*k+1,前k+1个数严格递增,后k+1个数严格单调递减; 思路: 可以先求该序列最长单调递增和方向单调递增的最长序列,然后枚举那第 ...
- EF之贪婪加载和延迟加载
这篇文章将讨论查询结果的控制 在使用EF(Entity Framework)的过程中,很多时候我们会进行查询的操作,因此知道哪些数据会被加载到内存当中就至关重要.在多多的情况下,你可能并并不需要加载全 ...
- Qt教程
https://blog.csdn.net/louis_815/article/details/54286544 软件下载:http://download.qt.io/ https://blog.cs ...
- Summit Online Judge
题意: 询问将取值在 $[L,R]$ 的若干个整数相加,可以得到 $[x,y]$ 区间内多少个数字. 解法: 只需要考虑求 $[L,R]$ 的数字能凑出 $[1,n]$ 的多少个数字,即可得出答案. ...
- CF-798B
B. Mike and strings time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- codevs-2235
2235 机票打折 题目描述 Description .输入机票原价(3到4位的正整数,单位:元),再输入机票打折率(小数点后最多一位数字).编程计算打折后机票的实际价格(单位:元.计算结果要将个位数 ...
- JAVA基础--JAVA API常见对象(包装类和正则)12
一.基本类型包装类 1.基本类型包装类介绍 8种基本类型: byte short int long float double char boolean 这8种基本类型它 ...
- [WIP]webpack 概念
创建: 2019/04/09 概念 入口 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始. 进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖 ...
- POJ3450【KMP理解】
题意: 求多个字符串的最长公共子串 思路: 4000个串,200长度. 一种暴力,对于一个串最多有200*200=40000级别个子串,然后我要再处理一下next数组200,8e6复杂度: 然后我要和 ...
- POJ3268【最短路】
题意: n个点m条有向边,每个点有一头牛,每头牛会沿着各自的最短路先到x点,然后又从x点到各自的点,求这些牛中间最短路程最大的牛. 思路: 从x点到各点的最短路不用说了,裸的最短路: 但是从所有点到x ...