css 适配
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 适配的更多相关文章
- CSS适配,方案
1.尺寸常用单位: https://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html px.em.rem.% 2.CSS的长度单位适配方案 ...
- 移动端css适配
/* iphoneX.iphoneXs */ @media only screen and (device-width: 375px) and (device-height: 812px) and ( ...
- css - 兼容适配坑点总结(。。。)
1. transform为代表的这些css3属性一定要写-webkit-,不然低版本(目前遇到的是8)的苹果,不支持. 2. x的适配 /* x */ @media only screen and ( ...
- 用rem适配移动端
常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种 ...
- html5移动端适配- media query
iPad部分css适配 - media query 代码如下图: 注: @media要放在css最下方,防止被覆盖.
- css的响应式布局和动画
把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...
- 解决 android 高低版本 webView 里内容 自适应屏幕的终极方法
转载请声明出处(http://www.cnblogs.com/linguanh/) 一,先说下我的情况,大家可以对号入座(嫌无聊请跳过) 我的项目要求是这样的,先从数据库里面拿出来html标签,因为加 ...
- 使用rem来开发你的移动端网站
what is rem ? )css3中的计量元素大小的单位,类似px.pt.em. )一种相对根元素font-size的计算方式.1rem = <html>'s font-size px ...
- iosclient发现_世界杯送流量活动项目总结
世界杯如火如荼的进行.视频站点相似于门户站点.须要高速依据外部环境更新内容. 产品经理须要策划活动,并安排实施.这个活动就是在这样背景下产生的,爱奇艺与运营商合作,实现双赢.爱奇艺能够通过运营商 ...
随机推荐
- 图像的相似度Hash算法
Hash算法有三种,分别为平均哈希算法(aHash).感知哈希算法你(pHash)和差异哈哈希算法(dHash). 针对以上三种的Hash算法详解见博客园文章 https://www.cnblogs. ...
- Test Case:: 12C ASMCMD New feature (Doc ID 1589249.1)
Test Case:: 12C ASMCMD New feature (Doc ID 1589249.1) APPLIES TO: Oracle Database - Enterprise Editi ...
- win 10 命令行导出注册表
命令如下: reg export 注册表中的key 保存路径 reg export HKLM\Software\MyCo\MyApp AppBkUp.reg 如果需要直接覆盖原来的文件,可以加上 ...
- 从荣耀 xSport Pro 运动蓝牙耳机发布看蓝牙立体声耳机的新动态
10月22日,荣耀在北京举行新品发布会,不仅带来了荣耀20青春版手机,还正式发布了荣耀xSport PRO运动蓝牙耳机.该款耳机是荣耀全新一代颈戴式运动蓝牙耳机,兼具运动和时尚属性,高颜值的渐变色机身 ...
- 围观高手是如何写好 Python 循环,把内存用到极致的?
0 前言 说到处理循环,我们习惯使用for, while等,比如依次打印每个列表中的字符: lis = ['I', 'love', 'python'] for i in lis: print( ...
- intelj idea中除了Find Usage外的另一种查找级联调用的方法
一.方法 平时都是使用find usage来找一个方法的引用的地方,但是只能查看一级,今天偶然发现个查看多级的办法: 在源码编辑界面:
- 【Web开发】到底什么是短链接
目录 什么是短链接 为什么使用短链接 节省发送的内容 提升用户体验 便于链接追踪,分析点击来源 一定程度上保护原始网站链接 短链接生成平台 短链接生成原理 参考 今天无意中看到一个名词--" ...
- 资深程序员对于Python各个方向的面试经验分享,非常给力!
之前早有前辈们说过,"裸辞一时爽,一直裸辞一直爽",这话一点不假,裸辞你要面临没有收入来源,但是每天眼睁睁看着各种花销不断支出的煎熬,我主要是觉得一边在上家公司工作一边去下家面试可 ...
- javaWeb核心技术第八篇之Cookie和Session
会话技术: 会话是什么? 浏览器和服务器交互,浏览器打开网页访问服务器,会话开始,正常交互. 浏览器关闭,会话结束. 会话能干什么? 会话可以共享数据. Cookie和session将数据保存在不同的 ...
- Git错误:error:failed to push some refs to 'git@gitee.com:name/project.git'
大家在通过本地仓库上传文件到远程仓库时,会报出 error:failed to push some refs to 'git@gitee.com:name/project.git' 的错误. 解决方法 ...