html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度

显示网页的终端屏幕分辨率大小不一，为了能使同一网页能在不同的终端中合适显示，CSS3 推出了媒体查询media。用媒体查询media能根据屏幕分辨率大小确定网页宽度，这主要在 CSS 文件中根据屏幕分辨率大小定义网页宽度。

以前用百分比来根据屏幕分辨率大小确定网页宽度，但由于同样的百分比随着屏幕分辨率的增大，网页离屏幕两边的距离也随之变宽，不能很好的解决这个问题；用媒体查询media就能很好的解决这个问题。

用媒体查询media根据屏幕分辨率大小确定网页宽度实例：

主要举电脑屏幕的例子，因为手机屏幕太小，电脑屏幕显示的内容不能很好的显示于手机，需要减掉一部分内容的，不然内容显得太多拖着屏幕太长。当前电脑屏幕分辨率宽度主要有这么几类：1024 以下的、1024 - 1280、1280 - 1440、1440 - 1920、1920 - 2560、2560 - 3328、3328 以上的，下面分别定义适合这些宽度的 CSS(在 CSS 文件中定义)：

网页主要 html 代码：

CSS样式：

@media screen and (max-width:1024px) {.page{width:980px;}}

@media screen and (min-width:1025px) and (max-width:1280px) {.page{width:90%;}}

@media screen and (min-width:1281px) and (max-width:1440px) {.page {width:92%;}}

@media screen and (min-width:1441px) and (max-width:1920px) {.page{width:94%;}}

@media screen and (min-width:1921px) and (max-width:2560px) {.page {width:96%;}}

@media screen and (min-width:2561px) and (max-width:3328px) {.page {width:97%;}}

@media screen and (min-width:3329px) {.page {width:98%;}}

定义网页宽度时可用具体数字和百分比。一般来说，屏幕分辨率之间的范围比较小适合用具体数字，屏幕分辨率之间的范围比较大适合用百分比。

html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度相关推荐

css media区间宽带显示,css媒体查询 @media适配不一样大小窗口
版权声明:本文为博主原创文章,未经博主容许不得转载. https://blog.csdn.net/Lockey23/article/details/75452536css CSS3 @media是什么 ...
计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
媒体查询(media)-screen
1.什么是媒体查询? 以我个人的理解来说,媒体查询就是监听实时监听页面的宽度,当达到媒体查询设置的条件时,用设置在媒体查询中的css样式代替该元素之前设置的样式(当然,如果该元素之前没有设置css样式 ...
怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
媒体查询Media Queries详解
@media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...
媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
移动开发—媒体查询(Media Query)
移动开发-媒体查询(Media Query) 1.使用@media,可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中,页面也会 ...
媒体查询Media Query
媒体查询(Media Query)是CSS3新语法. @media 可以针对不同的屏幕尺寸设置不同的样式. 语法规范: @media mediatype and | not | only (media ...

html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度

html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度相关推荐

最新文章

热门文章