html适应不同的分辨率,css如何适应不同分辨率？

如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大显示器)，变化范围极大。我们该如何使用css实现适应不同分辨率呢？下面我们来看一下css适应不同分辨率的方法。

纯CSS实现PC浏览器(显示屏幕)或移动端浏览器宽度样式的自适应。将用到@media样式进行判断。

一般我们设计网页的时候PC端宽度都在900-1400像素之间，移动端宽度在320-640像素之间，用@media样式选择可以让PC端和移动端自适应。

css样式选择器写法如下：@media screen and (判断属性){

css样式

}

示例：

.main{height:400px;border:1px solid #eee}

@media screen and (min-width:1201px){

.main{width:1200px}

}/*设置在屏幕(浏览器)不小于1201px时，main的宽度显示宽度为1200px*/

@media screen and (max-width:1200px){

.main{width:900px}

}/*设置在屏幕(浏览器)不大于1200px时，main的宽度显示宽度为900px*/

注意css代码的先后顺序，必须尺寸由大到小。这里还要提到书写格式也要按照上面的这样写，全部用英文字符，也可写成压缩的样式：@media screen and (max-width:1200px){.main{width:900px}} 结果是有效。

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

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

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

html适应不同的分辨率,css如何适应不同分辨率？相关推荐

html如何自动适应分辨率,css如何适应不同分辨率？
如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.我们该如何使用css实现适应不同分辨率呢?下面我们来看一下css适应不同分辨率的方法. 纯CSS实 ...
字体大小自适应屏幕分辨率 CSS解决方案
字体大小自适应屏幕分辨率 CSS解决方案参考文章: (1)字体大小自适应屏幕分辨率 CSS解决方案 (2)https://www.cnblogs.com/love0618/p/4020752.htm ...
HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号
文章目录一.分辨率分类二.视口三.Flex布局 3.1 justify-content 主轴对齐方式 3.2 align-items 侧轴的对齐方式 3.3 伸缩比 flex:value; 3. ...
linux系统刷分辨率,Linux下设置其分辨率及刷新率
行频:行频又称为"水平扫描频率",指电子枪每秒在荧光屏上扫过的水平线的数量,其值等于"场频 × 垂直分辨率×1.04",单位为KHz(千赫兹).行频是一个综合分 ...
keyshot分辨率多少合适_投影仪分辨率和画质，你想知道的都在这里！
如今投影仪在多媒体.广告.展馆的使用越来越普及,通过投影仪实现互动地面投影也能给人们带来大屏幕视觉体验的享受.但在投影仪使用领域日益扩大的今天,很多购买投影仪的用户仍旧对画质的选购标准表示困惑,不了解 ...
计算机PS属性怎么改,电脑不用ps怎么改图片分辨率教你修改图片分辨率的方法...
在网络生活中经常需要上传图片,可是网络上图片有限制的,需要调整一下图片分辨率,网上有很多调节方法,其中ps软件虽说很好用,但要下载安装显得很麻烦.其实我们可以使用编辑功能手动调节分辨率来获得想要的效果 ...
乌班图linux分辨率不能调,ubuntu18.04 分辨率设置（双屏幕显示，添加没有的分辨率）...
时间:2019-03-13 作者:魏文应要解决什么问题 ? 通过本文,你能够实现类似于以下的效果: 给电脑接两个显示器,分别是独立显卡 nvidia 和集成显卡,独立显卡通过 DVI 接口和显示器连 ...
图片如何降低分辨率？如何缩小照片分辨率不改变图像大小？
图片分辨率是生活中不太常见的一个概念,一般只有在使用证件照.打印图片时会遇到,那么如果我们的图片分辨率与所需要的分辨率不符合时应该怎么办呢?今天我们来给大家介绍一个图片修改分辨率的方法,支持修改jpg ...
android电视分辨率是多少合适,电视分辨率多少合适
电视机是每个家庭都会用到的电器之一,电视机分辨率直接决定着电视机的品质.那么电视机分辨率多少合适呢?下面就随随小编一起来了解下吧! 电视分辨率多少合适? 电视机分为等离子电视机和液晶电视机,这两种电视 ...

html适应不同的分辨率,css如何适应不同分辨率？

html适应不同的分辨率,css如何适应不同分辨率？相关推荐

最新文章

热门文章