css3 媒体查询常用适配
@media (max-width:1300px) {}
@media (max-width:1080px) {}
@media (max-width:799px) {}
@media (max-width:720px) {}
@media (max-width:460px) {}
@media (max-height:750px) {}
@media (max-height:310px) {}
@media (max-height:260px) {}
@media (min-width:1921px),(min-height:1201px) {}
@media (max-width:1280px) and (max-height:800px) {}
@media (max-width:960px) and (max-height:600px) {}
@media (max-width:800px),(max-height:480px) {}
/*orientation:landscape 宽度大于高度*/
@media
(orientation:landscape) and (max-height:480px),(orientation:portrait) and (max-width:699px) {}
@media (orientation:landscape) and (max-height:300px) {}
@media (orientation:landscape) and (max-height:650px) {}
@media (orientation:landscape) and (max-height:650px) and (max-width:660px) {}
@media (orientation:landscape) and (max-height:650px) and (max-width:540px) {}
@media
(orientation:landscape) and (max-height:650px) and (max-width:460px),(orientation:landscape) and (max-height:300px),(orientation:portrait) and (max-height:380px) {}
手机端
/* 小于400 */
@media screen and (max-width:300px) {
html,body {
font-size:0.58rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:301px) and (max-width:350px) {
html,body {
font-size:0.6rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:351px) and (max-width:420px) {
html,body {
font-size:0.7rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:421px) and (max-width:490px) {
html,body {
font-size:0.9rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:491px) and (max-width:620px) {
html,body {
font-size:1rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:621px) and (max-width:720px) {
html,body {
font-size:1.2rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:721px) and (max-width:820px) {
html,body {
font-size:1.4rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:821px) and (max-width:920px) {
html,body {
font-size:1.6rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:921px) and (max-width:1020px) {
html,body {
font-size:1.8rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1021px) and (max-width:1120px) {
html,body {
font-size:2rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1121px) and (max-width:1220px) {
html,body {
font-size:2.2rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1221px) and (max-width:1320px) {
html,body {
font-size:2.4rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1321px) and (max-width:1420px) {
html,body {
font-size:2.6rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1421px) and (max-width:1520px) {
html,body {
font-size:2.8rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1521px) and (max-width:1620px) {
html,body {
font-size:3rem;
}
}
css3 媒体查询常用适配的更多相关文章
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...
- iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
- iPhone6的CSS3媒体查询
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...
- CSS3媒体查询使用小结
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...
- CSS3媒体查询
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- CSS3媒体查询总结
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- css3 媒体查询的学习。
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
随机推荐
- Hyperledger Fabric密码模块系列之BCCSP(五) - 国密算法实现
Talk is cheap, show me your code. 代码也看了,蛋也扯了,之后总该做点什么.响应国家政策,把我们的国密算法融合进去吧-- 先附两张bccsp下国密算法的设计实现图. ...
- java界面设计(swing)
1.Swing基本组件 窗体控件 JFrame.容器控件 JPanel .标签控件 JLabe.按钮控件 JButton.文本框控件 JTextField 与 JTextArea(注意JScrollP ...
- 模拟HTTP协议接收请求并返回信息
private string HttpPost(string Url, string postDataStr) { HttpWebRequest request = (HttpWebRequest)W ...
- 使用WPF教你一步一步实现连连看(二)
连连看算法 第一步:我们考虑在同行或者同列的情况: 同行或者同列又分三种情况: 第一:边线,RowNum或者ColNum等于0或者9 第二:两个相邻 第三:同行不相邻,这种事有条件的,所在行(或列)的 ...
- LeetCode两数之和-Python<一>
下一篇:LeetCode链表相加-Python<二> 题目:https://leetcode-cn.com/problems/two-sum/description/ 给定一个整数数组和一 ...
- windows server 2008 R2 开启远程桌面
1.计算机 ——属性 2.远程设置 3.远程桌面-允许运行任意版本远程连接-选择用户-添加用户:Administrator;或是可以是其他非管理员用户(默认的系统管理员已经被授予了访问权限); 点确 ...
- [PHP] 算法-数组归并排序并计算逆序对的个数的PHP实现
在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%100000000 ...
- 4.数码相框-freetype多行显示,居中显示
本章主要内容如下: 1)多行显示 2)居中显示 在上章3.数码相框-通过freetype库实现矢量显示里,我们使用矢量坐标时,该坐标仅仅在原点位置处,所以文字有可能会超出坐标,如下图所示: 既然超出了 ...
- matlab中syms与sym有什么区别
syms x y %就是定了符号变量x y以后x y就可以直接使用了,有他们运算出来的结果也是符号变量 当然上面的也可以x=sym('x'),y=sym('y') sys('a+b')%就是将a+b转 ...
- Docker-compose networks 的例子
今天实验了下 docker 下的网络设置,记录一下过程,以免后面忘记. (系统:Centos 7.4 ,docker 版本:18.03.1-ce, docker-compose version 1.1 ...