长沙网站建设公司专注于网站设计、网络推广、seo网站优化等服务。在线QQ:285433734

css如何实现响应式布局?

响应式网页设计

       css如何进行响应式布局,我们将向您的移动用户展示台式机或笔记本电脑用户所看到的相同的网页。只有层叠样式表(CSS)会有所不同。也就是说,台式机/笔记本电脑上的浏览器将使用一组CSS指令来呈现页面,而另一些使用移动电话。

        这种工作方法不仅可以节省为每种类型的用户创建不同的页面集合的工作,而且还可以保持多年来维护这两套页面的麻烦,试图保持它们的同步。

css如何进行响应式布局

在CSS中解锁响应式设计的关键:媒体查询

现在我们已经有了手机浏览器来避免调整背后的东西,我们不得不手动适应其小屏幕。虽然这看起来倒退了一步,但它实际上允许我们以比电话的自动化设施更合适的方式来做事情:例如,我们可以调整可调整大小的事物(例如图像)不要调整大小(如单词)。为了腾出空间,我们可以发送对屏幕底部不那么关键的元素。例如,如果您要在手机上阅读sitewizard.com上的任何文章(包括该文章),则会发现我的导航菜单(即按钮列表)通常位于桌面浏览器的左列,位于智能手机页面的底部。我认为,由于用户在这个页面上,他/她的主要目的是阅读文章。因此,我把文章放在最上面,让访问者可以立即得到它。

要完成这样的魔法,我们需要一些方法来检测屏幕大小。现代浏览器以“媒体查询”的形式提供这种功能。

样式表中的媒体查询看起来像这样:

@media屏幕和(最大宽度:320px){ 
  / *对于320像素或更少的屏幕CSS将被放在这个部分* / 
}

“ @media screen and (max-width:320px)”测试大括号内的任何CSS 只适用于最大宽度为320像素的屏幕。当然,您不限于测试320像素的宽度。后者仅仅是我为这个例子挑选的一个数字。您可以测试min-width与 max-width任何尺寸的。你甚至可以测试大小的范围,如下面的代码。

@media screen和(min-width:320px)和(max-width:640px){ 
  / *对于至少320像素宽但小于或等于640像素宽的屏幕* / 
}

不包含在“ @media”部分中的CSS规则适用于所有人。并且@media只有在满足查询的条件时才会使用包含在特定“ ”部分中的代码。如果您有多个必须同时满足的条件,请按照and给出的示例将它们连接到“ ”。您可以有多个媒体查询块,每个块只有在满足该块的条件时才会应用。

/ *代码在这里,直到第一个@media块,将适用于任何屏幕大小* / 
#somethingorother { 
  width:800px; 


@media屏幕和(最大宽度:320px){ 
  / *在屏幕小于或等于320像素时
  生效* / #somethingorother { 
    width:120px;   对于321到480像素(含)之间的屏幕, { / * 格式生效* /   #somethingorother {     width:320px; 
  } 

@media screen和(min-width:321px)和(max-width:480px)   } } @media screen和(min-width:481px){   / *在大于或等于481像素的屏幕上生效* /   #somethingorother {
    width:480px; 
  } 


/ *这里的代码将适用于任何屏幕大小* /

请注意,以上仅是一个示例,旨在说明使用多个媒体查询块。我选择那里使用的数字是任意的,所以不要花时间困惑他们。

您也可以将媒体查询放入<link>元素本身,以便只有满足特定条件时才应用整个样式表。例如,下面加载了3种样式表,一种假设是用于纵向模式的移动设备,另一种是横向模式,最后是台式机和笔记本电脑。

<link rel =“stylesheet”type =“text / css”media =“screen and(max-width:360px)”href =“portrait.css”> 
<link rel =“stylesheet”type =“text / css”media =“screen and(min-width:361px)and(max-width:480px)”href =“landscape.css”> 
<link rel =“stylesheet”type =“text / css”media =“screen and(min- width:481px)“href =”desktop.css“>

这使您可以清晰地将不同屏幕分辨率的代码分成不同的文件,如果这是你想要的。再一次请注意,上面的例子是为了演示如何在<link>标签中使用媒体查询。数字是任意选择的。

使用媒体查询测试纵向和横向模式

而不是使用特定的分辨率来判断设备是否处于纵向或横向模式,您也可以使用条件“ orientation: portrait”和“ orientation: landscape”。

@media screen和(orientation:portrait){ 
  / * ... * / 

@media屏幕和(orientation:landscape){ 
  / * ... * / 
}

我倾向于不使用这些,因为我发现知道可用像素的数量比仅仅计算设备的方向更有用。但是,如果您需要使用该设施,则该设施是可用的。

媒体查询中的其他有用功能

除了以上的,也可以插入用于测试min-height,max-height,width 和height。

另外,你可以用“ only” 开始媒体查询,如下面的代码片段所示:

@media只有屏幕和(最大宽度:480px){ 
  / * ... * / 
}

不理解现代媒体查询语法的非常旧的浏览器会认为“仅”是一种设备(如“屏幕”或“打印”或“语音”)。而且由于他们认为这个区块中的规则是针对被分类为“唯一”的装置的,他们不会遵循这些规则。而另一方面,现代浏览器却忽略了“唯一”这个词,所以如果你需要防止旧浏览器解析你的手机规则,甚至在桌面计算机上应用它们,这个条件测试是有用的。

如果您想要在所有情况下使用CSS,除非满足某些条件,则可以not在条件之前使用“ ”,如下例所示。

@media not(max-width:639px){ 
/ *任何宽度超过639像素的设备的CSS规则* / 
}

(请注意,因为我没有screen在上面的例子中指定“ ”,这意味着“ all”意味着所有的设备。)

不过要注意的是,“不”在很老的浏览器中被视为“仅”。也就是说,它将被解释为设备类型,因此下面的块中的样式表将不会被应用。


cache
Processed in 0.024926 Second.