js/css 屏幕自适应的奇妙故事

故事从写了一个页面放到舍友电脑发现出现滚动条开始

网页是靠内容撑开的，考虑到屏幕大小有可能让元素重叠整个页面很糟糕，所以定位的margin、top等基本使用px作单位。在我的电脑上是这个样子的。✧(≖ ◡ ≖✿)OK~完美：
- Σ( ° △ °|||)︴舍友打开是这样子的（噗他电脑屏幕差不多就是个正方形）：
✧(≖ ◡ ≖✿)好吧屏幕高度不对，但是我又不想改变我的布局单位，我想让整个页面按比例缩小一下就好了。

//函数负责返回屏幕高度和body实际内容长度的比function hasScrollbar() {let screenHeight = window.innerHeight;let bodyHeight =  document.body.scrollHeight || document.documentElement.scrollHeight;return (screenHeight/bodyHeight);}//在jQuery里面在页面加载的时候启动这段
$("body").css({"transform":"scale("+hasScrollbar()+")"});

◐▽◑ 效果还挺稳的，事实上body缩小到0.97的样子，但是body的background大小是不随着body的内容大小的，可以溢出来直到铺满屏幕。

js/css 屏幕自适应的奇妙故事相关推荐

php自动适应屏幕大小,如何解决js获取屏幕大小并且让图片自适应的方法
在写h5页面的时候,经常会需要将图片自适应大小,一般都是用等比例的缩放,这就有个问题,当上传的图片不是一个规格时就会出现展示图片不完美. 为了解决这个问题,我们可以通过js去获取图片的大小,然后在根据 ...
html自动适应屏幕分辨率,css如何自适应屏幕大小？
css如何自适应屏幕大小?下面本篇文章给大家介绍一下使用CSS实现屏幕大小自适应的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何自适应屏幕大小? 要想实现css屏幕 ...
JS+CSS打造随屏幕滚动的quick快速导航代码
代码内容: <html> <head> <title>JS+CSS打造随屏幕滚动的quick快速导航代码_网页代码站(www.webdm.cn)</title ...
php如何让图片铺满屏幕,如何解决js获取屏幕大小并且让图片自适应的方法
在写h5页面的时候,经常会需要将图片自适应大小,一般都是用等比例的缩放,这就有个问题,当上传的图片不是一个规格时就会出现展示图片不完美. 为了解决这个问题,我们可以通过js去获取图片的大小,然后在根据 ...
移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle {margin: 50px auto 0;w ...
css网页屏幕自适应,css自适应宽度如何让网页自适应所有屏幕宽度
如何设置一个div的宽度为自适应宽度?div里只有文字.感情的戏,小编没演技.这场戏女主角是你而小编只是戏里的一个傻逼. #choise ul li a { display:block; border ...
vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
有了这套flexible.js 移动端自适应方案，你就能在移动端的来去自如， (*^__^*)
flexible.js 移动端自适应方案一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...

js/css 屏幕自适应的奇妙故事

故事从写了一个页面放到舍友电脑发现出现滚动条开始

js/css 屏幕自适应的奇妙故事相关推荐

最新文章

热门文章