您现在的位置是：网站首页> 编程资料编程资料

css使用@media响应式适配各种屏幕的方法示例详解使用CSS3的@media来编写响应式的页面 css3的@media属性实现页面响应式布局示例代码

2021-09-03 1042人已围观

简介 这篇文章主要介绍了css使用@media响应式适配各种屏幕的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

PC端设备屏幕的宽度

页面宽度大于1000px（>=1000）且小于1200px（<=1200）的时候执行下面的CSS（实际刚好“>=1000”或“<=1200”的都执行）

 @media screen and (min-width:1000px) and (max-width: 1200px){ .cont_li{ width: 50px; margin-left: 7px; padding-left: 9px; } }

注意以下顺序，如果把@media (min-width: 768px)写在了最下方，那么很悲剧，

 @media (min-width: 1200){ //>=1200的设备 } @media (min-width: 992px){ //>=992的设备 } @media (min-width: 768px){ //>=768的设备 }

这是因为如果屏幕宽度是1440，由于1440>768那么1200就会失效。

所以在使用min-width时，小的在前面，大的在后面；同理，如果使用max-width时，就是大的在前面，小的在后面：

 @media (min-width: 768px){ //>=768的设备 } @media (min-width: 992px){ //>=992的设备 } @media (min-width: 1200){ //>=1200的设备 } @media (max-width: 1199){ //<=1199的设备 } @media (max-width: 991px){ //<=991的设备 } @media (max-width: 767px){ //<=768的设备 }

PC屏幕自适应CSS3代码：

 /*当页面宽度大于1000px且小于1200px的时候执行，1000-1200*/ @media screen and (min-width:1000px) and (max-width: 1200px){ body{ font-size:16px } } /*当页面宽度大于1280px且小于1366px的时候执行,1280-1366*/ @media screen and (min-width:1280px) and (max-width: 1366px){ body{ font-size:18px } } /*当页面宽度大于1440px且小于1600px的时候执行,1440-1600*/ @media screen and (min-width:1440px) and (max-width:1600px){ body{ font-size:20px } } /*当页面宽度大于1680px且小于1920px的时候执行,1680-1920*/ @media screen and (min-width:1680px) and (max-width:1920px){ body{ font-size:22px } }

电脑屏幕尺寸的例表得到了几个宽度：1024、1200、1280、1366、1440、1600、1680、1920。

移动端设备屏幕的宽度

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

所以这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-size来计算，例如：

 html{ font-size:16px;}

那么我们这里的1rem就应该这么来计算：1x16=16px=1rem；

移动端字体：

 @media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-size:56.25px;}} @media screen and (min-width: 375px) {html{font-size:58.59375px;}} @media screen and (min-width: 400px) {html{font-size:62.5px;}} @media screen and (min-width: 414px) {html{font-size:64.6875px;}} @media screen and (min-width: 440px) {html{font-size:68.75px;}} @media screen and (min-width: 480px) {html{font-size:75px;}} @media screen and (min-width: 520px) {html{font-size:81.25px;}} @media screen and (min-width: 560px) {html{font-size:87.5px;}} @media screen and (min-width: 600px) {html{font-size:93.75px;}} @media screen and (min-width: 640px) {html{font-size:100px;}} @media screen and (min-width: 680px) {html{font-size:106.25px;}} @media screen and (min-width: 720px) {html{font-size:112.5px;}} @media screen and (min-width: 760px) {html{font-size:118.75px;}} @media screen and (min-width: 800px) {html{font-size:125px;}} @media screen and (min-width: 960px) {html{font-size:150px;}}

移动端屏幕自适应CSS3代码：

 @media screen and (min-width:320px) and (max-width:360px){ body{ font-size: 12px; } } @media screen and (min-width:360px) and (max-width:390px){ body{ font-size: 13px; } } @media screen and (min-width:390px) and (max-width:460px){ body{ font-size: 14px; } } @media screen and (min-width:320px) and (max-width:460px){ body{ font-size: 12.5px; } }

到此这篇关于css使用@media响应式适配各种屏幕的方法示例的文章就介绍到这了,更多相关@media响应式适配屏幕内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：CSS设置div背景图的实现代码使用CSS cross-fade()实现背景图像半透明效果的示例代码完美解决webpack打包css背景图片路径问题CSS3为背景图设置遮罩并解决遮罩样式继承问题CSS背景图片设置的6个有趣的技巧CSS3 实现响应鼠标移动背景图片漂移效果的用户介绍卡片源码使用css写带纹理渐变背景图的示例代码

下一篇：CSS实现波动水球效果的示例代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网