https://blog.csdn.net/weixin_35467885/article/details/80778992

1、通过link方法

link方法引入媒体类型其实就是在标签引用样式的时候,通过link标签中的media属性来指定不同的媒体类型。这种方式引入媒体类型时常跟着引用的样式文件走,如下所示。

    <!--手机端-->
<link rel="stylesheet" type="text/css" href="style_phone.css" media="screen and (max-width: 960px)"/>
<!--电脑端-->
<link rel="stylesheet" type="text/css" href="style_PC.css" media="screen and (min-width: 960px)"/>

2、使用@media

@media是CSS3中引进的一个特性,称为媒体查询,可以直接写在中间或者外部样式文件中。例如,查询媒体是否是屏幕,屏幕尺寸是否小于960px:

    @media screen and (max-width: 960px){
/* 手机端CSS代码 */
} @media screen and (min-width: 960px){
/* 电脑端CSS代码 */
}

以上就是最经典判断是电脑端还是手机端。

css 适配的更多相关文章

  1. CSS适配,方案

    1.尺寸常用单位:   https://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html px.em.rem.% 2.CSS的长度单位适配方案 ...

  2. 移动端css适配

    /* iphoneX.iphoneXs */ @media only screen and (device-width: 375px) and (device-height: 812px) and ( ...

  3. css - 兼容适配坑点总结(。。。)

    1. transform为代表的这些css3属性一定要写-webkit-,不然低版本(目前遇到的是8)的苹果,不支持. 2. x的适配 /* x */ @media only screen and ( ...

  4. 用rem适配移动端

    常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种 ...

  5. html5移动端适配- media query

    iPad部分css适配 - media query 代码如下图:   注:  @media要放在css最下方,防止被覆盖.  

  6. css的响应式布局和动画

    把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...

  7. 解决 android 高低版本 webView 里内容 自适应屏幕的终极方法

    转载请声明出处(http://www.cnblogs.com/linguanh/) 一,先说下我的情况,大家可以对号入座(嫌无聊请跳过) 我的项目要求是这样的,先从数据库里面拿出来html标签,因为加 ...

  8. 使用rem来开发你的移动端网站

    what is rem ? )css3中的计量元素大小的单位,类似px.pt.em. )一种相对根元素font-size的计算方式.1rem = <html>'s font-size px ...

  9. iosclient发现_世界杯送流量活动项目总结

       世界杯如火如荼的进行.视频站点相似于门户站点.须要高速依据外部环境更新内容. 产品经理须要策划活动,并安排实施.这个活动就是在这样背景下产生的,爱奇艺与运营商合作,实现双赢.爱奇艺能够通过运营商 ...

随机推荐

  1. 产品经理如何使用 CODING 进行项目规划

    CODING 为您的企业提供从概念到软件开发再到产品发布的全流程全周期软件研发管理,为您的研发团队提供全程助力,帮助研发团队捋清需求.不断迭代.快速反馈并能实时追踪项目进度直到完成.同时 CODING ...

  2. CentOS连接Wifi

    原文地址:https://blog.csdn.net/zhuangm_888/article/details/53868451   1. 查看是否需要安装固件 大多无线网卡还需要固件.内核一般会自动探 ...

  3. Docker系列03-容器Docker镜像的使用

    Docker镜像的使用前两个章节,介绍了容器的相关基础知识,这章我们介绍镜像的简单使用,镜像hub里面有来自于全世界贡献的各种镜像,包括一些入门和学习练手的镜像,今天我们使用的正式其中一个用于学习练习 ...

  4. Ubuntu下配置IP地址

    17.10版本之前: Ubuntu的网卡配置文件跟CentOS的不一样,Ubuntu的网卡配置文件是/etc/network/interfaces.我们用vi /etc/network/interfa ...

  5. 用POI 3.17读取EXCEL数据

    导入jar 包 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</a ...

  6. 使OrangePi Zero+支持U盘启动

    以下步骤均在Armbian系统中完成 一.无内存卡启动 1.使用armbian-config启动SPI 输入sudo armbian-config→选中System并回车→选中Hardware并回车→ ...

  7. Laravel 即时应用的一种实现方式

    即时交互的应用 在现代的 Web 应用中很多场景都需要运用到即时通讯,比如说最常见的支付回调,与三方登录.这些业务场景都基本需要遵循以下流程: 客户端触发相关业务,并产生第三方应用的操作(比如支付) ...

  8. 【pat】C++之刷题常用STL容器整理

    1.vector 动态数组,方便的动态扩容,方便的变量初始化(int类型默认初始化为0,bool默认初始化为false),可以用来实现邻接表(结点数太多的图). 头文件 #include<vec ...

  9. dict继承关系

    from collections.abc import Mapping, MutableMapping#dict属于mapping类型, MutalbelMapping继承Mapping a = {} ...

  10. 使用 Docker 构建 Nebula Graph 源码

    Nebula Graph 介绍 Nebula Graph 是开源的高性能分布式图数据库.项目使用 C++ 语言开发,cmake 工具构建.其中两个重要的依赖是 Facebook 的 Thrift RP ...