css多媒体竖屏,css3 媒体查询方向：横屏竖屏教程

大家好，今天给大家分享的是css3 媒体查询方向：横屏竖屏教程，希望大家喜欢。

说道媒体查询，很多人会感觉陌生，但是对于做响应式开发的同学来说，那是再熟悉不过了。

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

就是比如我们的手机屏幕，在横屏的时候的显示，和竖屏时候的显示我们可以分别指定不同的样式。

我们先来看一组代码

//横屏

@media only screen and (orientation: landscape) {

body {

background-color: red;

}

//竖屏

@media only screen and (orientation: portrait) {

body {

background-color: blue;

}

上面的代码大家可以在横屏和竖屏的时候显示的样式是不一样的。

比如

在横屏的时候显示的是红色的，在竖屏的状态的时候显示的是蓝色的。

这样的话我们就可以根据横屏和竖屏来展示不同的样式了。

比如横屏的话可以展示的内容是很多的，我们来给定义一个样式，那么

竖屏的时候，展示的内容有点少，然后呢我们就可以在一行显示的内容要少一些。

好了，今天的css3 媒体查询方向：横屏竖屏教程就分享到这里，大家再见。

css多媒体竖屏,css3 媒体查询方向：横屏竖屏教程相关推荐

css3 媒体查询
最近一直没网,好不容易有网络了,大概了解了下,媒体查询的东西,css3的部分,下面是从网上查到的信息,一起看看吧. 其实我了解的媒体查询就是 :我们的网页能够让用户在不同尺寸的移动设备上面都有很好 ...
iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
html 苹果xr媒体查询,iPhone的CSS3媒体查询_html/css_WEB-ITnose
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
css3媒体查询实现网站响应式布局
响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词. 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给 ...
前端基础入门之css像素与视口和媒体查询
文章目录像素与视口像素视口(viewport) 手机像素完美视口 vw单位 vw 常见的设计图宽度 vw适配 rem 媒体查询响应式布局媒体查询媒体查询语法媒体类型媒体特性断点像 ...
常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重页面适配笔记本缩放
css属性就是要用的多用的熟知道的多就像一本工具书除了基础原理剩下的就是知识面了极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...
css设置最小宽度消失,关于CSS：最小/最大宽度媒体查询没有语法意义
我发现(最小宽度/最大宽度)媒体查询的概念有些混乱. 自然,如果我要设计媒体查询,我想说(用伪代码). if(screen.width < 420) { ApplyStyle(); } 谈论mi ...
CSS3 媒体查询（media）与 Viewport
@media 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. 一.语法 1.样式表中的CSS媒体查询 @media mediatype and|not|only (media fe ...
运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏
//iphoneX.iphoneXs @media only screen and (device-width: 375px) and (device-height: 812px) and (-web ...

css多媒体竖屏,css3 媒体查询方向：横屏竖屏教程

css多媒体竖屏,css3 媒体查询方向：横屏竖屏教程相关推荐

最新文章

热门文章