PC端适应屏幕分辨率
时间:2019-10-15
本文章向大家介绍PC端适应屏幕分辨率,主要包括PC端适应屏幕分辨率使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如何让HTML页面适应不同的屏幕分辨率
1.根据不同的分辨率,加载不同的css样式文件(一般不用)
①针对800、1280、1440、1600、1920等分辨率,创建不同的css文件。然后在各种分辨率css文件下,写css样式表。
针对一个页面,写多css样式表,按照不同的要求,有些要求适配1280~1920分辨率,各个分辨率之间,只对页面上的元素进行宽高、尺寸、位置等进行调整,整体的框架是相似或者说是相同的。
通常是先完成一个分辨率下的css样式表。然后在这个基础之上,对其他分辨率进行调整。
②加载方式。
在HTML页面的<head></head>
标签中,插入<script>代码,在不同的分辨率下,加载不同的css样式表。
注意这里的js一定要写在<head></head>
标签里面,这样在加载页面内容之前,可以提前把css样式表加载出来
<script> // 分辨率大于等于1680,大部分为1920的情况下,调用此css if(window.screen.width >= 1680){ document.write('<link rel="stylesheet" href="css/index_1920.css">'); } // 分辨率在1600-1680的情况下,调用此css else if(window.screen.width >= 1600){ document.write('<link rel="stylesheet" href="css/index_1600.css">'); } // 分辨率小于1600的情况下,调用此css else{ document.write('<link rel="stylesheet" href="css/index.css">'); } </script>
2.媒体查询
媒体查询是CSS3的新特性,绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率,应用不同的css样式。
如果你对媒体查询不熟悉,可以点击链接进行学习这一新特性。菜鸟教程-CSS3 @media 查询
这个思路和和方法一差不多,或者说方法一的思路和这个思路差不多,毕竟这也是官方的做法。我们有两种使用媒体查询的方式。
1.根据不同的分辨率,引入不同的css样式表
这个方法和方法一相同,也是通过判断电脑的分辨率,来引入相对应的css样式表。
<!-- 分辨率低于1280,采用test-01.css样式表 --> <link rel="stylesheet" media="screen and (max-device-width:1280px)" href="test-01.css"> <!-- 分辨率高于1400,采用test-02.css样式表 --> <link rel="stylesheet" media="screen and (min-device-width:1440px)" href="test-02.css">
2.在同一个css样式表中,根据不同的分辨率,写不同的css样式
这个方法只有一个css演示表,在这个样式表里面,根据不同的分辨率,写不同的css样式。
<style media="screen"> /*分辨率低于1280,采用下面的样式*/ @media screen and (max-device-width:1280px){ div{ width: 200px; height: 200px; background-color: green; } } /*分辨率高于1440,采用下面的样式*/ @media screen and (min-device-width: 1440px){ div{ width: 300px; height: 300px; background-color: red; } } </style>
原文地址:https://www.cnblogs.com/iamlhr/p/11677157.html
- Linux基础(day53)
- 15.4 xshell使用xftp传输文件
- JDK容器学习之ArrayList:底层存储和动态扩容
- Linux基础(day57)
- 15.2/15.3 使用vsftpd搭建ftp
- JDK容器学习之Map: HashMap,TreeMap,LinkedHashMap对比小结
- 14.4 exportfs命令
- 不用那么多,每天一点点,学习React,贵在持之以恒
- Linux基础(day56)
- android classloader双亲委托模式
- 14.3 NFS配置选项
- 14.2 NFS服务端安装配置
- React Native组件之Button
- JDK容器学习之TreeMap (二) : 使用说明
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- dotnet tool 工具安装提示 Could not find a part of the path 安装失败
- dotnet core 进行 XML 序列化抛出 XmlSerializers dll 文件找不到
- C# dotnet 高性能多线程工具 ExecuteOnceAwaiter 只执行一次的任务
- 一道Postgresql递归树题
- 突击并发编程JUC系列-JDK1.8 扩展类型 LongAdder
- 利用tensorflow训练简单的生成对抗网络GAN
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.7):运算符(基本算数运算符、原码、反码、补码)
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.6):基本数据类型及字符集编码(字符编码和char型)
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.6):基本数据类型及字符集编码(整型、浮点型、布尔型)
- 多图详解Spring框架的设计理念与设计模式
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.2-3.5):标识符、关键字、注释、变量及常量
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.1):一个简单的例子
- 详解Java解析XML的四种方法
- 《Java从入门到失业》第四章:类和对象(4.6):类路径
- 《Java从入门到失业》第四章:类和对象(4.5):包