通过不同显示电脑屏幕宽度怎么调访问不同网站的电脑版和手机版网站

来源：蜘蛛抓取(WebSpider) 时间：2017-07-08 14:33 标签： 电脑屏幕的宽度
手机网站设计尺寸及界面布局_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
手机网站设计尺寸及界面布局
&&本文主要介绍手机网站设计尺寸及界面布局。
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢4642人阅读
网页制作（49）
HTML5+CSS3（16）
如今，电脑显示器的屏幕分辨率向越来越大发展，而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站，开始让自己的页面自适合各种分辨率，在小分辨率下显示基本的内容，在大分辨率下显示全部功能，甚至是分多等级的多版本。比如说我们熟悉的wordpress后台，当屏幕分辨率小于900px的时候，左边的侧栏就会变成收拢状态（@media only screen and (max-width:900px)）。
这样的好处：让顾客得到最佳的网页视图；但是依然存在坏处：比如我自己的习惯喜欢在手机上查某些资料，某些网页用手机打开自适应后导致我要找的资料被隐藏了，比较烦躁。结论：请善用这种技术，比如前面wordpress后台的例子，收拢状态的侧栏，依然可以被点击后展开，这就是一个完美的例子。
不管怎么样，作为网站前端开发人员需要知道并且会用这种知识。这篇文章让我们揭开 css 里面 @media 属性的神秘面纱，学习一下是如何实现的。
css2里面的@media
@media&属性在CSS2里面已经存在，参见，在这个说明页面我们可以看到在css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS。
语法： @media
sMedia { sRules }
sMedia : 　指定设备名称。请参阅附录：设备类型
sRules : 　样式表定义
指定样式表规则用于指定的设备类型。请参阅link对象的media属性（特性）。
// 设置显示器用字体尺寸
@media screen {
BODY {font-size:12 }
// 设置打印机用字体尺寸
@media print {
@import &print.css&
BODY {font-size:8}
css3里面的@media
@media&属性在CSS3里面已经演变成一种&media queries（媒体查询/匹配）了，参见，在CSS3里面，可以用查询语句来匹配各种类型的屏幕。
语法：@media ：&sMedia& { sRules }
取值：
&sMedia&：
指定设备名称。请参阅附录：设备类型
{sRules}：
样式表定义。
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）.
media_query: [only | not]? &media_type& [ and &expression& ]*
expression: ( &media_feature& [: &value&]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid
media_query&媒体查询条件。包括了 only not and 这些经常在程序里面出现的逻辑判断。
expression&表达式。媒体特征的匹配与否。
media_type&媒体的种类。包括了很多。
media_feature&媒体的特征。常用的是 min-width max-width 最小最大宽度的判断。
说多了也不好理解，我们最方便从实例中学习怎么运用。下面给出一个页面例子，你可以从这个例子中看出，不同浏览器屏幕宽度、高度下的背景颜色的自动变换：
其中核心的css代码如下：
&style type=&text/css&&
body{background:}
/*蓝色 默认颜色只有当下面条件都不匹配的时候，即宽度500px-800px之间+高度100px-400px之间*/
@media screen and (max-width:500px){body{background:}}
/*宽度小于500px时 绿色*/
@media screen and (min-width:800px){body{background:}}
/*宽度大于800px时 红色*/
@media screen and (max-height:100px){body{background:}}
/*高度小于100px时 黄色*/
@media screen and (min-height:400px){body{background:}}
/*高度大于400px时 粉色*/
从上面的实例可以看出，要小于的时候用max，要大于的时候用min，逻辑是正好相反的，大家注意一下。
有了媒体匹配查询的CSS3功能之后，你就可以在一个页面上定义多套显示风格了，非常好用方便。
但是低级版本的IE不支持怎么办？谁去管它呢？你有默认的一套风格都支持就好了啊，一般手机上的浏览器都是webkit的内核，这些东西都是兼容的。所以这么好用的一个属性，大家都喜欢用。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：116956次
积分：2073
积分：2073
排名：第19517名
原创：83篇
转载：60篇
(1)(3)(1)(4)(2)(12)(5)(2)(2)(8)(2)(8)(15)(4)(6)(68)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'

我要回帖

更多关于 电脑屏幕的宽度 的文章

 

随机推荐