做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080

使用了几种办法

1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常

2.使用rem的地方

width,height,margin,padding,left top都采用了REM,

HTML的FONT-SIZE设置的为100PX.是为了计算方便.此时BODY的FONT-SIZE要设置为正常值,例如14PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大.

3.当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:

$(window).resize(function ()// 绑定到窗口的这个事件中
{

let designSize = 1920; // 设计图尺寸

let html = document.documentElement;

  let wW = html.clientWidth;// 窗口宽度

let rem = wW * 100 / designSize;

  document.documentElement.style.fontSize = rem + 'px';

});

计算font-size的逻辑是:

当设计图是1920时,规定HTML的FONT-SIZE的值是100. 也就是,当浏览器窗口调整到1920PX时,1REM=100PX,如果要设定一个160PX(1920设计图时)的margin-top,那么REM设置值是1.6rem.

当窗口调整到非设计图的宽度如winWidth时,HTML的FONT-SIZE值是:(100/1920)*winWidth.也就是说,1920下FONT-SIZE是100px.那么winWidth下,按比例计算.

或者可以这样:窗口宽1920时,FONT-SIZE是100PX,那么winWidth时,相当于窗口变化为1920时的 (winWidth / 1920).根据比例公式,winWidth时的FONT-SIZE就是

(winWidth/1920)*100

winWidth / 1920 = FONT-SIZE(PX) / 100

100 / 1920 = FONT-SIZE(PX) / winWidth 这个公式容易理解

如果调整窗口大小,会发现HTML的FONT-SIZE值在变化,同时,使用REM设置的DOM也在变化.因为REM正是参考HTML的FONT-SIZE值来计算的

4.如果是在手机上,平板电脑上,更要使用REM

由于手机上一般不会调整浏览器大小,所以可以在页面载入时,设置一次即可

$(function(){

let designSize = 750; // 设计图尺寸

let html = document.documentElement;

  let wW = html.clientWidth;// 窗口宽度

let rem = wW * 100 / designSize;

  document.documentElement.style.fontSize = rem + 'px';

})

5.使用REM能够较好的自适应移动端

手机平板移动设备的宽度不超过1080,如果设备已经超过了这个宽度,则不应再计算html的font-size值了.因为已经是PC屏幕了.

if ( window.innerWidth>1080)

return;

6.关于字体大小

如果字体大小使用rem,由于rem是计算出来的.所以字体大小变化会比较明显.

例如设计稿750px,字体大小20px,那么就是 "font-size : .2rem" ,这里有个问题是,设计稿是2倍的,在手机上是1倍的.于是rem会小一半,这时,手机上的字体就会非常小了.

人总是希望pc屏幕上看到的文字,在手机上仍然能看得清楚,可以接受一点缩小,但不能是巨变.

一种解决方法是,字体使用2倍大小,也就是 "font-size: .4rem".

这个方法会导致在超过设计稿宽度尺寸的屏幕上,字体变得非常大.这种情况一般是在平板或者PC上了,如果只是手机端使用,则不用考虑此种情况.

还有个办法是使用回em或者px,然后针对不同的屏幕做媒体查询,

使用em,前提是设置body字体大小,例如 font-size:14px

这种办法对手机端不好,平板和PC合适.可以做媒体查询适配小屏的em基准

@media (max-width: 320px)

{
    font-size: 12px;
}

@media (min-width: 321px)

{
    font-size: 14px;
}

自适应PC端网页制作使用REM的更多相关文章

  1. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

  2. 网络爬虫中Fiddler抓取PC端网页数据包与手机端APP数据包

    1 引言 在编写网络爬虫时,第一步(也是极为关键一步)就是对网络的请求(request)和回复(response)进行分析,寻找其中的规律,然后才能通过网络爬虫进行模拟.浏览器大多也自带有调试工具可以 ...

  3. Java SpringMVC实现PC端网页微信扫码支付完整版

    一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...

  4. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

  5. pc端网页,移动端网页(andorid、ios)离开页面做一个时间存储

    如图所示:在一个页面中做了一个倒计时,然后用户想离开页面做其他事情,需求是离开页面之后把时间保存,下一次进来继续的时候时间还是上次离开的时间 第一次我用的事件是:  // window.onbefor ...

  6. PC端网页的基本构成

    首先,一个前端最基本的就是排网页,有人会看不起拍页面,认为不就是排一个页面嘛,有啥的,分分钟的事,可是他不知道的是,一个网页中也包含了很多内容,像我们如果不理解margin,padding,会经常对我 ...

  7. PC端网页嵌入百度地图

    1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文件 参考网址:https ...

  8. 手机测试pc端网页

    在这个问题上徘徊了 一个钟头了,终于被我找到方法了,就赶紧记下来,以后好查阅!! 主要问题在防火墙,防火墙阻当了80端口,所以怎么用手机访问都是访问不了的.把防火墙关闭就好了! 贴上httpd-vho ...

  9. offset 、 client 和 scroll - PC端网页特效

    1.元素偏移量  offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...

随机推荐

  1. 福州大学软件工程1816 | W班 第7次作业成绩排名

    写在前面 汇总成绩排名链接 1.作业链接 第七次作业--项目需求分析(团队) 2.评分准则 本次作业映射总分为100分+贡献度得分,由以下部分组成: 引言(5 points) . 用户场景(15 po ...

  2. VMware威睿

    VMware总部位于美国加州帕洛阿尔托 [1]  ,是全球云基础架构和移动商务解决方案厂商,提供基于VMware的解决方案, 企业通过数据中心改造和公有云整合业务,借助企业安全转型维系客户信任 [2- ...

  3. PHP开发编码规范

    (转载:https://blog.csdn.net/alexdream/article/details/2213313) 这些年来多从事Linux下PHP和C相关的开发,带过很多项目和团队,下面是根据 ...

  4. 文件搜索神器之everything

    之前我提到了,在本地快速的进行文件的检索是平常工作中必要的部分,一个好的搜索软件会大大的提升我们的工作效率.就是它,everything,官方的网站地址是http://www.voidtools.co ...

  5. mysql5.7以上安装

    下载:https://dev.mysql.com/downloads/mysql/ 1.在解压的mysql下(bin目录统计),创建my.ini 文件,内容日下(路径根据自己的目录修改) [mysql ...

  6. WebService实例-CRM系统提供WebService实现用户注册功能

    <—start—> 编写crm的webservice接口,实现客户信息保存操作.在CustomerService接口中新增一个服务接口,用于添加客户注册的信息. @Path("/ ...

  7. mac下virtualbox中centos6.5虚拟机实现全屏和调整分辨率

    在visualbox里安装好centos后,发现不能分辨率与原屏幕不一致,很多解决方法是:安装增强包.可是安装增强包后依然达不到效果. 究其原因,原来因为没有安装显卡驱动导致安装了增强包后无法实现分辨 ...

  8. Netty ByteBuf 和 String 转换

    参考https://blog.csdn.net/o1101574955/article/details/81024102 参考http://youyu4.iteye.com/blog/2361959 ...

  9. Protocol buffers--python 实践(二) protocol buffers vs json

    为什么专门开一个坑,来使用pb.放弃本在各平台上都支持得很好的json而使用pb的一个归根到底的理由,就是希望在保证强类型和跨平台的情况下,能够更轻,更快,更简单.既然是奔着这个目标去的,到底多快我需 ...

  10. WPF中元素拖拽的两个实例

    今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListV ...