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

CSS 屏幕大小自适应的实现示例CSS像素以及移动端不同屏幕适配问题解决css新手教程之背景图充满整个屏幕css列表滑动防止被底部遮住和适配屏幕长一点的机型处理 CSS3中媒体查询结合rem布局适配手机屏幕使用css使div占满整个屏幕的实现方法详解CSS3原生支持div铺满浏览器的方法自适应屏幕的CSS响应式布局设计技巧总结css3实例教程一款纯css3实现的发光屏幕旋转特效css 相对浏览器动态居中永远保持在屏幕正中html图片自适应手机屏幕大小的css写法

2021-09-03 1005人已围观

简介这篇文章主要介绍了CSS 屏幕大小自适应的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

要想实现css屏幕大小自适应，首先得引入 CSS3 @media 媒体查询器：

media的使用和规则：

　　①被链接文档将显示在什么设备上。

　　②用于为不同的媒介类型规定不同的样式。

语法：

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

实例：

 /* 这是匹配横屏的状态，横屏时的css代码 */ @media all and (orientation :landscape){} /* 这是匹配竖屏的状态，竖屏时的css代码 */ @media all and (orientation :portrait){} @media X and (min-width:200px){} /*X为媒体类型--->比如print/screen/TV等等*/ /* 宽度大于600px小于960之间时，隐藏footer结构 */ @media all and (min-height:640px) and (max-height:960px){ 　　　footer{display:none;} }

在实际应用的时候，首先得在HTML的头文件里上加入以下代码：

解释：　　　

width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

因为media的类型很多，这里就发菜鸟教程的对应链接了：https://www.jb51.net/css/103906.html

下面是media类型的screen（用于电脑屏幕，平板电脑，智能手机等）：

css自适应屏幕大小大方法：

 @media screen and (min-width: 320px) and (max-width: 1156px){ .site-bg-dl { position: fixed; height: 100%; width: 100%; z-index: 0; background-image: url(bjxzfwzx/images/bj1.png); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size:100% 100%; -moz-background-size:100% 100%; } }

解释：

告诉浏览器当屏幕大于320px，并小于1156px下执行此代码；

在css中添加如下内容可以分别定制不同屏幕的显示样式：

 /* 大屏幕 ：大于等于1200px*/ @media (min-width: 1200px) { ... } /*默认*/ @media (min-width: 980px){...} /* 平板电脑和小屏电脑之间的分辨率 */ @media (min-width: 768px) and (max-width: 979px) { ... } /* 横向放置的手机和竖向放置的平板之间的分辨率 */ @media (max-width: 767px) { ... } /* 横向放置的手机及分辨率更小的设备 */ @media (max-width: 480px) { ... }

到此这篇关于CSS 屏幕大小自适应的实现示例的文章就介绍到这了,更多相关CSS 屏幕自适应内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！　

上一篇：CSS子元素选择父元素的实现CSS子元素跟父元素的高度一致的实现方法解决CSS中子元素z-index与父元素兄弟节点的层级问题css中子元素设置margin-top为什么影响了父元素CSS如何只改变父元素背景透明度不改变子元素透明度css匹配选择属于其父元素的第N个子元素的方法父元素与子元素之间的margin-top问题(css hack)css子元素相对父元素进行定位的实现

下一篇：CSS中的translate(-50%,-50%)实现水平垂直居中效果使用CSS实现盒子水平垂直居中的方法(8种)CSS 水平居中并限定最大的宽度实现CSS实现子元素div水平垂直居中的示例css3 flex实现div内容水平垂直居中的几种方法CSS3 不定高宽垂直水平居中的几种方式CSS3实现水平居中、垂直居中、水平垂直居中的实例代码手把手教你CSS水平、垂直居中的10种方式(小结)web前端之css水平居中代码解析

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

相关内容

点击排行

本栏推荐

猜你喜欢