浅谈CSS自适应网页-使用@media screen达到响应式效果 - 微夏博客网 - 致力于网络优秀资源的分享、交流!

  • 首页
  • PHP
  • 浅谈CSS自适应网页-使用@media screen达到响应式效果

浅谈CSS自适应网页-使用@media screen达到响应式效果

由 ℡若兮相言 于 2015-1-13 20:49 Tuesday 发表,已有3420人观看。


    关于CSS,我也学过一些内容,学的都是些基础的东西,能看懂一些基本的代码。

    一直觉得网页CSS有多难多难的,但是最近我在修改模板的时候,仔细阅读了几段代码,发现也不是太麻烦,几句代码的问题。


    1、判断媒体类型,执行不同的css样式属性

    最主要的几句代码,就是通过屏幕的分辨率而达到控制控制的效果。

    优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小

    @media screen and (min-width:660px) and (max-width:980px) {
    	.bloglist { width: 65%; float: left; }
    	}

    这句话的意思就是当屏幕尺寸 大于 660PX 小于 980PX,执行括号里面的css样式属性,也就是 宽度65% 


    2、还有一种方式,是调用多个CSS样式表


    <link rel=”stylesheet” media=”screen and (max-width: 980px)” herf=”980px.css” />

    这句代码一般写在模板的header.php里,意思是当屏幕分辨率在980px以下时,调用980px.css


    <link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />


    因为用这句代码的话,要写几个CSS样式表,有些麻烦,所以一般用第一种方法的较多。


    3、这一点虽然不是通过CSS控制,但是也是很重要的一个部分。

    在电脑上虽然是可能响应式了,在手机又是如何呢?如果手机上显示的还是乱怎么办呢?


    这时就需要一句代码,把整个网页进行整体的 “缩放”,以便达到更好的效果。


    在模板 header.php 头文件里为入以下代码:


    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">


    把这几个代码运用上之后,一般都可以达到你想要的效果!




标签: 响应式 CSS




↓↓↓↓↓你可能在找下面的内容↓↓↓↓↓

特别申明:若无说明,文章均为原创,转载时请注明本文地址,谢谢合作!
本文链接:
评论:
同盟源 2015-01-15 13:15 Google Chrome 39.0.2171.95 Windows 7
呵呵,我再学PHP呢,css学完了

℡若兮相言 2015-01-15 17:39
@同盟源:表示PHP都是用着学着,,,

发表评论: