常用CSS媒体查询
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
@media screen and (min-width:1366px){
/*pc端 css*/
}
/*iphone 5/5s/5se */
@media screen and (max-width:569px){
top: 7%;
left: 18%;
}
/*iphone 6/7/8 */
@media screen and (min-width:569px) and (max-width:668px){
top: 12%;
left: 20%;
}
/*iphone 6p/7p/8p */
@media screen and (min-width:668px) and (max-width:737px){
top: 14%;
left: 20%;
}
/*iphone x */
@media screen and (min-width:737px) and (max-width:813px){
top: 12%;
left: 21%;
}
/*ipad*/
@media screen and (min-width:813px) and (max-width:1025px){
top: 22%;
left: 21%;
}
/*ipad pro*/
@media screen and (min-width:1024px){
top: 25%;
left: 21%;
}
常用CSS媒体查询的更多相关文章
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- css媒体查询:响应式网站
css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...
- CSS 媒体查询 响应式
媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...
- css媒体查询aspect-ratio宽高比在less中的使用
css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适 ...
- 我的Vue之旅、04 CSS媒体查询完全指南(Media Quires)
什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...
- CSS 媒体查询@media
1. 概述 1.1 定义 @media可以针对不同的屏幕尺寸(媒体类型)设置不同的样式,在响应式页面中,@media非常有用.重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面. 1. ...
随机推荐
- C语言calloc()函数:分配内存空间并初始化——stm32中的应用
经常在代码中看到使用malloc来分配,然后memset清零,其实calloc更加方便,一句顶两句~ 头文件:#include <stdlib.h> calloc() 函数用来动态地分配内 ...
- MySQL分组排序(取第一或最后)
MySQL分组排序(取第一或最后) 方法一:速度非常慢,跑了30分钟 SELECT custid, apply_date, rejectrule FROM ( SELECT *, IF ( , ) A ...
- Charles破解注册
Charles破解注册English 本页面会持续更新Charles最新版破解注册方法,建议加入收藏 Charles 4.1.2 下载Charles v4.1.2 并安装 云盘下载: Windows ...
- [Google Guava] 11-事件总线
原文链接 译文连接 译者:沈义扬 传统上,Java的进程内事件分发都是通过发布者和订阅者之间的显式注册实现的.设计EventBus就是为了取代这种显示注册方式,使组件间有了更好的解耦.EventBus ...
- 6、Spring Boot 2.x 集成 MyBatis
1.6 Spring Boot 2.x 集成 MyBatis 简介 详细介绍如何在Spring Boot中整合MyBatis,并通过注解方式实现映射. 完整源码: 1.6.1 创建 spring-bo ...
- Codeforces Round #591 (Div. 2, based on Technocup 2020 Elimination Round 1) C. Save the Nature【枚举二分答案】
https://codeforces.com/contest/1241/problem/C You are an environmental activist at heart but the rea ...
- P2634 [国家集训队]聪聪可可 点分治
思路:点分治 提交:1次 题解: 不需要什么容斥...接着板子题说: 还是基本思路:对于一颗子树,与之前的子树做贡献. 我们把路径的权值在\(\%3\)意义下分类,即开三个桶\(c[0],c[1],c ...
- sql server 复习笔记2
主键约束 可以通过定义primary key 约束来定义主键, 用于强制表的实体化完整性,一个表只能有一个主键约束, 并且primary key 约束中的列不能为空值,由于primary key 约束 ...
- JXOJ 9.7 NOIP 放松模拟赛 总结
比赛链接 T1 数数 题意:有a个红球,b个黄球,c个蓝球,d个绿球排成一列,求任意相邻不同色的排列的数目 1 <= a , b, c, d <= 30 答案对1e9 + 7 取膜 用 ...
- 「CF484E」Sign on Fence「整体二分」「线段树」
题意 给定一个长度为\(n\)的正整数序列,第\(i\)个数为\(h_i\),\(m\)个询问,每次询问\((l, r, w)\),为\([l, r]\)所有长度为\(w\)的子区间最小值的最大值.( ...