PC端

特点

PC端的屏幕具备以下特点：

  • 屏幕大小一般是大于 13.3英寸

  • 用户会经常拖拉浏览器的大小

原因

正是因为 PC端上的浏览器大小会经常被改变，而且改变的范围还很大，用户会全屏浏览器，用户也会缩小浏览器到一个很小的值，如600px左右。 所以pc端上如果使用流式布局(百分比布局)，会导致页面很难看。

解决

所以，PC端上只能通过版心布局来解决这种情况。

  • 当屏幕大于版心宽度时，版心居中显示
  • 当屏幕小于版心宽度时，屏幕出现一个横向的滚动条，这种方案几乎所有的PC端网站都在采用。

案例

代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>版心布局</title>
<style>
　　* {
　　　　margin: 0;
　　　　padding: 0;
　　　　box-sizing: border-box;
　　}
　　html,body{
　　　　height: 100%;
　　　　background-color: #ccc;
　　}
　　main{
　　　　width: 1200px;
　　　　height: 100%;
　　　　margin: 0 auto;
　　　　font-size: 40px;
　　　　background-color: pink;
　　}
　　header{
　　　　height: 80px;
　　　　background-color: aqua;
　　}
</style>
</head>

<body>
　　<main>
　　　　<header>版心</header>
　　　　<section>内容</section>
　　</main>
</body>
</html>

效果

适配方案（二）之PC端适配的更多相关文章

  1. CSS3及JS简单实现选项卡效果（适配手机端和pc端）

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  2. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  3. 【前端适配】vw单位移动端适配方案

    近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...

  4. pc端适配移动端

    pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content=&quo ...

  5. 【原】pageResponse - 让H5适配移动设备全家(移动端适配)

    上一篇文章<为什么选择iPhone5的分辨率作为H5视觉稿尺寸>最后留下了问题:是否需要视觉设计师设计多套的视觉稿供给前端工程师做页面适配呢?按照自己以前的方法,通常会要求设计师设计2套的 ...

  6. 【weixin】微信支付---Native支付模式二（PC端支付大多采用此模式）

    [模式二]:商户后台系统调用微信支付[统一下单API]生成预付交易,将接口返回的链接生成二维码,用户扫码后输入密码完成支付交易.注意:该模式的预付单有效期为2小时,过期后无法支付 模式二与模式一相比, ...

  7. iPhone X适配方案

    iPhone X适配方案 https://github.com/Wscats/iPhone-X 绝对长度单位 英寸 厘米 毫米 磅 pc inch cm mm pt pica 相对长度单位 是网页设计 ...

  8. webapp：移动端高清、多屏适配方案（zz）

    来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...

  9. 移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]

    Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...

随机推荐

  1. ThinkPHP数据查询与添加语句

    在ThinkPHP框架中实现数据的查询操作 function ShowAll() { //Model:数据库中每张表对应一个模型 //类名是表名,类里面的成员变量是列名 //把一张表对应一个类,其中一 ...

  2. Android ListView多布局

    使用listview多布局会出现一点问题: 由于多个item布局给单一的item布局是不一样的,使用起来,contentview的复用会出现问题. 避免出现问题的有这几个方法: 1.重写 getVie ...

  3. springboot 底层 JackSon 的使用

    Jackson常用的注解使用和使用场景: 接下来我们在看一段代码,这段代码是常用注解在实体类User中的简单使用:package zone.reborn.springbootstudy.entity; ...

  4. Python中的单继承与多继承实例分析

    Python中的单继承与多继承实例分析 本文实例讲述了Python中的单继承与多继承.分享给大家供大家参考,具体如下: 单继承 一.介绍 Python 同样支持类的继承,如果一种语言不支持继承,类就没 ...

  5. JavaScript之屏幕上下左右滑动监听

    前言 存在这么一个需求,根据用户在屏幕不同的滑动方向(上.下.左.右),使用js脚本判断出不同的滑动行为,更新网页为不同的界面. 源码 参考了博文[1]的源码,但由于存在一些漏洞,比如:上下滑动事件监 ...

  6. 【JVM学习笔记】Class.forName方法学习

    三个参数的版本的源代码如下 doc文档翻译 使用给定的类加载器(即第3个参数)返回与具有给定字符串名称(第1个参数)的类或接口关联的Class对象.给定类或接口的完全限定名称(以getName返回的相 ...

  7. 拒绝LOW ---青鸟影院购票系统

    1.首先我们需要了解这个软件的功能: 1).影院每天更新放映列表,系统支持实时查看,包括电影放映场次的时间: 2).影院提供三类影票:普通票,学生票和赠票: 3).允许用户查看某场次座位的售出情况: ...

  8. QT下过多点的曲线绘制

    绘制过多点的曲线意义重大.但通过试验,QT的PainterPath不是很如意.当多段曲线围成一个区域时,PainterPath内并不包含该区域的所有面积,只包含曲线和其弦构成的面积. 为了解决这一问题 ...

  9. STS中依赖项的设置

    经过试验,把依赖项总结一下,可能会不断修改. 1. 父依赖项(固定) <parent> <groupId>org.springframework.boot</groupI ...

  10. PJzhang:python基础进阶的10个疗程-three

    猫宁!!! 参考:北京理工大学-python程序语言设计 第3节:基本数据类型 默写代码的重要性. 保留字一定要全部都会默写,不能有错. pow(x,y),计算x的y次方,整数没有大小限制 整数进制 ...