前端CSS @media 媒体查询PC端

注意and后面跟一个空格

@media screen and (min-width: 1024px){body{font-size: 12px}
} /*>=1024的设备屏幕*/@media screen and (min-width: 1100px) {body{font-size: 14px}
} /*>=1100的设备屏幕*/
@media (min-width: 1280px) {body{font-size: 18px;}
} /*>=1280的设备屏幕*/@media screen and (min-width: 1366px) {body{font-size: 20px;}
} /*>=1366的设备屏幕*/ @media screen and (min-width: 1440px) {body{font-size: 24px !important;}
} /*>=1440的设备屏幕*/ @media screen and (min-width: 1680px) {body{font-size: 26px;}
}  /*>=1680的设备屏幕*/
@media screen and (min-width: 1920px) {body{font-size: 30px;}
}  /*>=1920的设备屏幕*/

前端CSS @media 媒体查询PC端相关推荐

前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
pc显示器分辨率前端_@media 响应式PC端媒体查询屏幕分辨率尺寸总结
最近在写一个PC端的活动页面,想让页面适配不同的分辨率,既然提出了这样的需求,那么我们就要去尽量满足.因为之前一直写的是固定版心,然后在将容器居中,这样写的话,就导致页面在低分辨屏幕下会出现横向的滚动 ...
CSS Media媒体查询
媒介类型在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默 ...
深入理解CSS Media媒体查询
前面的话一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
css@media媒体查询
Media所有参数汇总 width:浏览器可视宽度. height:浏览器可视高度. device-width:设备屏幕的宽度. device-height:设备屏幕的高度. orientation: ...
css 媒体查询移动端,媒体查询（pc端，移动端不同布局）
媒体查询语法: 1.内联写法:and之后必须有空格 @media screen and (min-width:960px //判断浏览器大小条件){ body{background:red} //常规 ...
CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...

前端CSS @media 媒体查询PC端

前端CSS @media 媒体查询PC端

前端CSS @media 媒体查询PC端相关推荐

最新文章

热门文章