html页面自动适应pc端,自适应PC端网页制作使用REM(示例代码)
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080
使用了几种办法
1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常
2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.此时BODY的FONT-SIZE设置为正常值,12PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大.
3.当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:
$(window).resize(function ()// 绑定到窗口的这个事件中
{
var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight;// 当前窗口的高度
var wW = window.innerWidth;// 当前窗口的宽度
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$(‘html‘).css(‘font-size‘, rem + "px");
});
如果调整窗口大小,会发现HTML的FONT-SIZE值在变化,同时,使用REM设置的DOM也在变化.因为REM正是参考HTML的FONT-SIZE值来计算的
4.如果是在手机上,平板电脑上,更要使用REM,由于手机上一般不会调整浏览器大小,所以可以在页面载入时,设置一次即可
$(function(){
var whdef = 50/750;// 表示750的设计图,使用50PX的默认值
var wH = window.innerHeight;// 手机窗口的高度
var wW = window.innerWidth;// 手机窗口的宽度
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$(‘html‘).css(‘font-size‘, rem + "px");
})
5.使用REM是个有效的办法,加上BOOTSTRAP SWIPER这些工具,可以比较省事的做出一些简单的效果
html页面自动适应pc端,自适应PC端网页制作使用REM(示例代码)相关推荐
- 【学习】自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
- Ajax 实现在WebForm中拖动控件并即时在服务端保存状态数据 (Asp.net 2.0)(示例代码下载)...
(一) . 运行示例效果 * 运行后用鼠标拖动蓝色的<马>到任意位置, 将浏览器关闭后, 再重新访问本页面, 会发现<马>仍然在您拖到的位置 (二). AjaxPro.NET简 ...
- html中自动随机点名的程序,html实现随机点名器的示例代码
此点名器开始点名后需点击停止按钮完成点名,因为是精简版没有考虑自动停止需求.姓名数据以字符串形式储存,适合小范围点名使用,有大量需求可自己适当改进. 随机点名生成 /* 页面css样式 */ .wra ...
- html pc端移动端自适应,pc、移动端 自适应布局方案
写在前面 我们在前端切页面的时候经常会被要求适配各种比例的屏幕,那么我们该怎么做呢? 做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366 ...
- pc端rem适配_自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
- PC端品优购网页制作(common.css)
制作网页前的基础学习 品优购项目规划 1.1网站制作流程 客户沟通制定方案 签订合同 预付定金 不能退 初稿审核 网页美工会制作原型图和PSD效果图 前台页面设计后台工程开发 测试验收 上线培训 后期 ...
- PC端品优购网页制作(common.css)2
正式制作网页 网站首页一般都是使用index命名,比如index.html或index.php 我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面 常用模块类名命名 ...
- 在tomcat新建html页面,仅将HTML,CSS网页部署到Tomcat(示例代码)
我刚刚开始开发一个网站.我现在所拥有的只是一个由几个CSS样式表支持的HTML页面. 我可以从HTML和CSS页面创建WAR文件吗?如何将它们部署到Tomcat服务器上? 谢谢. 答案 没有必要创建一 ...
- python 列表自动排序_Python学习小技巧之列表项排序的示例代码分享
这篇文章主要给大家介绍了Python学习小技巧之列表项排序的相关资料,文中介绍的非常详细,需要的朋友们可以参借鉴,下面跟着小编一起来学习学习吧. 本文介绍的是关于Python列表项排序的相关内容,分享 ...
最新文章
- 京东《未来科技趋势白皮书》,101页pdf
- 字符串charAt()
- bioskey的用法
- 简明深度学习方法概述 Deep Learning:Methods and Application
- 三维空间几何变换原理[平移、旋转、错切]
- ObjecT4:On-line multiple instance learning (MIL)学习
- SqlServer自定义聚合函数
- OpenCV与图像处理学习一——图像基础知识、读入、显示、保存图像、灰度转化、通道分离与合并
- ecshop category.php?id=4,categoryall.php
- 信息学奥赛一本通 1167:再求f(x,n)
- linux 按键驱动中断 rockchip_7.自己写中断方式按键驱动程序(详解)
- 手机也能当电脑用?--谈谈未来智能手机操作系统的走向
- FM1288的AEC调试经历,持续更新
- 使用JMH做Java微基准测试(四)默认状态测试
- css3-d ,动画,圆角
- 魔乐科技 oracle 视频,MLDN魔乐科技JAVA+Oracle数据库视频课程
- 阿里巴巴分布式调度引擎tbschedule实战四tbschedule的配置使用
- matlab实现jpg图片转gif
- arcgis api for js去掉地图边框与logo(arcgis api for js篇.3)
- HDS存储管理工具命令行汇总
热门文章
- 上帝掷骰子吗? 计算机程序构造解释 奇思妙想-摘要
- 受电信诈骗者青睐神器之多卡宝
- AI智能写作用boardmix,文案、论文、爆款、小说一键生成!
- 计算机休眠后无法唤醒硬盘,大师给你说win10电脑休眠待机后无法唤醒固态硬盘的完全解决办法...
- python的roc曲线与阈值_浅谈ROC曲线的最佳阈值如何选取
- 店宝宝:拼多多用户量接近阿里 电商三巨头财报出炉
- 差分数组+LeetCode1109
- 记录一次由屁股决定研发的狗血经历
- [ACM] 2017 SCNUPC
- 2015上机二 国际象棋跳马5*5