资讯专栏INFORMATION COLUMN

css3媒体查询

levinit / 2466人阅读

摘要:需要加载两个文件,来保证代码兼容设置渲染方式默认为最高让的文档模式永远都是最新的,如果用户电脑转了插件,可以让电脑里面的不管是哪个版本都可以使用引擎。

设置meta标签


解释:name="viewport",viewport

用户网页的可视区域
width:控制viewport的大小,可以指定一个值,如600,或者特殊的值,如device-width为设备的宽度(单位为缩放为100%时的css的像素)

initial-scale=1.0:初始的缩放比例(默认设置为1.0)
maximum-scale=1.0:允许用户缩放的最大比例(默认设置为1.0)
minimum-scale=1.0:允许用户缩放的最小比例(默认设置为1.0)
user-scalable=no用户是否可以手动缩放

2. 加载兼容文件js
因为IE8以及以下版本都不支持hmtl5和css3。需要加载两个js文件,来保证代码兼容




3. 设置IE渲染方式默认为最高

让IE的文档模式永远都是最新的



chrome=1.如果用户电脑转了chrome插件,可以让电脑里面的IE不管是哪个版本都可以使用webkit引擎V8。

4. css3 media写法
@media screen and (max-width:360px) {

        body{
            background: green
        }
    }
    @media screen and (min-width: 375px) and (max-width: 420px){
        body{
            background: red
        }
        
    }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113093.html

相关文章

  • css3 响应式媒体查询

    摘要:让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术,用于向不同的设备提供定制的样式表。 让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术,用于向不同的设备提供定制的样式表。为了演示一个简单的示例,我们可以更改不同设备的背景颜色 /* 将body的背景颜色设置为tan */ body { background-color: tan; } /* 在992px或更低...

    Bowman_han 评论0 收藏0
  • 响应式web设计--媒体查询

    摘要:媒体查询的用法媒体查询包含一个可选的媒体类型和,满足规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为或。还有一个与众不同的是,在其他浏览器中不要像其他属性一样在不同的浏览器中添加前缀。 媒体查询的用法 media 媒体查询包含一个可选的媒体类型和,满足CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为true或false。如...

    Eric 评论0 收藏0
  • 响应式web设计--媒体查询

    摘要:媒体查询的用法媒体查询包含一个可选的媒体类型和,满足规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为或。还有一个与众不同的是,在其他浏览器中不要像其他属性一样在不同的浏览器中添加前缀。 媒体查询的用法 media 媒体查询包含一个可选的媒体类型和,满足CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为true或false。如...

    Salamander 评论0 收藏0
  • 媒体查询@media的使用

    摘要:媒体查询参考一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度高度和颜色。媒体查询,添加自,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。 媒体查询 参考:https://developer.mozilla.org...一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度...

    mengbo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<