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发现_世界杯送流量活动项目总结
世界杯如火如荼的进行.视频站点相似于门户站点.须要高速依据外部环境更新内容. 产品经理须要策划活动,并安排实施.这个活动就是在这样背景下产生的,爱奇艺与运营商合作,实现双赢.爱奇艺能够通过运营商 ...
随机推荐
- Abusing SUDO Advance for Linux Privilege Escalation
Index What is SUDO? Scenario. Sudoer FIle Syntax. Exploiting SUDO zip tar strace tcpdump nmap scp ex ...
- 【漏洞预警】Redis 4.x/5.x 远程命令执行高危漏洞
2019年7月09日,阿里云应急响应中心监测到有安全研究人员披露Redis 4.x/5.x 远程命令执行高危漏洞利用代码工具.针对未授权或弱口令的Redis服务,攻击者通过构造特定请求,成功利用漏洞可 ...
- 设置UICollectionViewCell圆角和阴影
设置cell圆角: cell.contentView.layer.cornerRadius =2.0f; cell.contentView.layer.borderWidth =1.0f; cell. ...
- Android框架式编程之ViewModel
一.ViewModel介绍 ViewModel类是被设计用来以可感知生命周期的方式存储和管理 UI 相关数据.ViewModel中数据会一直存活即使 Activity Configuration发生变 ...
- Linux笔记16 使用Vsftpd服务传输文件;使用Samba或NFS实现文件共享。
FTP协议有下面两种工作模式. 1.主动模式:FTP服务器主动向客户端发起连接请求. 2.被动模式:FTP服务器等待客户端发起连接请求(FTP的默认工作模式).Vsftpd服务程序vsftpd作为更加 ...
- sqlplus登录时密码有特殊符号解决方法
偶然百度得到解决方法,在查看了公司有的脚本使用了这种解决方式,特记录下来,有需要的可以点击文末的链接查看原文. 本文转载https://www.cnblogs.com/lhrbest/p/656090 ...
- 如何在asm上定位数据块
转自 https://blogs.oracle.com/database4cn/%e5%a6%82%e4%bd%95%e5%9c%a8asm%e4%b8%8a%e5%ae%9a%e4%bd%8d%e6 ...
- Struts2.0
流程详解: 配置详解: constant (常用常量配置) 使用Struts2 框架 ,先要导入Struts2 需要的jar 包 , 通过配置中央控制器 以及web.xml 来实现 Str ...
- Ubuntu16.04重装NVIDIA驱动
Ubuntu系统 $ sudo apt update $ sudo apt upgrade 之后出现显卡驱动出现故障,nvidia-smi输出有错,检测不到相应的驱动.只好重装,记录一下,太多的教程根 ...
- 第一章 1.1 计算机和Python基础
一.计算机基础 1.1.进制 计算机中的数字有四种存在形式,分别是:十进制.二进制.八进制和十六进制 1.1.1.十进制 1.基数:0-9 2.进位:逢10进1 3.位权:例:123 = 3*10^0 ...