pc端页面适应不同分辨率

一、根据不同的分辨率,加载不同的css样式文件

800、1280、1440、1600、1920

在<head></head>标签中,使用js

<script>

        if(document.screen.width>=1680){

            document.write('<link rel="stylesheet" href="css/css1680.css">')

        }else if(document.screen.width>=1600){

            document.write('<link rel="stylesheet" href="css/css1600.css">')

        }else{

            document.write('<link rel="stylesheet" href="css/css800.css">')

        }

    </script>

二、媒体查询

css3新特性

1、多个样式表

<link rel="stylesheet" media="screen and (max-device-width:1280px)" href="css/css1280.css">

<link rel="stylesheet" media="screen and (min-device-width:1280px) and (max-device-width:1680px)" href="css/css1680.css">

<link rel="stylesheet" media="screen and (min-device-width:1680px)" href="css/css1920.css">

2、一个样式表

@media screen and (min-width:1920px){大于1920px的样式}

@medie screen and (min-width:1680px) and (max-width:1920px){1680-1920的样式}

@media screen and (max-width:1680px){小于1680px的样式}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、使用真实手机测试未发布网页的方法 方法① 在虚拟机中搭建xampp,将文件通过FTP传到虚拟机,在一个局域网中...
    fastwe阅读 755评论 0 0
  • 兼容IE8的响应式开发 全文概要: 1. 常用解决方案2. 使IE8兼容媒体查询 @media3. px和em和r...
    Sakura_P阅读 5,708评论 1 19
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,356评论 0 11
  • 这是一个最好的时代,因为我们站在潮流中;但也是一个最坏的时代,因为我们站在潮头上。 META相关 1. 添加到主屏...
    泡芙小姐110阅读 736评论 3 17
  • 那一片海,波澜壮阔 如湛蓝的宝石 镶嵌在蓝天之下 水天之间的辽阔 苍茫之间的感悟 把心底的纷纷扰扰放下 那一片海 ...
    似曾相识a阅读 298评论 1 9