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. canvas在vue中的应用

    使用cavas可以绘制各种图表.生成二维码.制作H5小游戏. 生命周期 canvas应该在mounted的生命周期中初始化,在updated中是无效的. export default { mounte ...

  2. Python读字节某一位的值,设置某一位的值,二进制位操作

    Python读字节某一位的值,设置某一位的值,二进制位操作   在物联网实际应用项目开发中,为了提升性能,与设备端配合,往往最终使用的是二进制字节串方式进行的通信协议封装,更会把0和1.True和Fa ...

  3. vue项目、路由

    目录 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 js原型补充 vue项目生命周期 页面组件 配置自定义全局样式 路由逻辑跳转 路由重定向 组件的生命周期钩子 路由传参 ...

  4. Linux系统学习 二十一、SAMBA服务—相关文件、配置文件详解

    3.相关文件 常用文件: /etc/samba/smb.conf      #配置文件 /etc/samba/lmhosts        #对应NetBIOS名与主机的IP的文件,一般Samba会自 ...

  5. 推荐系统| ② 离线推荐&基于隐语义模型的协同过滤推荐

    一.离线推荐服务 离线推荐服务是综合用户所有的历史数据,利用设定的离线统计算法和离线推荐算法周期性的进行结果统计与保存,计算的结果在一定时间周期内是固定不变的,变更的频率取决于算法调度的频率. 离线推 ...

  6. 3万字长文概述:通俗易懂告诉你什么是.NET?什么是.NET Framework?什么是.NET Core?

    [转载]通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的 ...

  7. 分布式文件服务器FastDFS的使用

    分布式项目中涉及到的文件上传与下载,此时使用之前的上传方式,将上传的文件与当前项目所在服务器放在同一个位置,显然不符合分布式项目的理念,此时我们借助FastDFS将上传的文件数据存储到单纯的一个服务器 ...

  8. Glide缓存流程

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/cPLkefpEb3w12-uoiqzTig作者:连凌能 Android上图片加载的解决方案有多 ...

  9. 从七个方面,面试BAT大厂高级工程师,纯干货!

    转载注明:https://blog.csdn.net/WantFlyDaCheng/article/details/100078782 一.框架是重点,但别让人感觉你只会山寨别人的代码 二.别单纯看单 ...

  10. WebShell代码分析溯源(二)

    WebShell代码分析溯源(二) 一.一句话变形马样本 <?php $POST['POST']='assert';$array[]=$POST;$array[0]['POST']($_POST ...