响应式 --- 媒体查询

lpjustdoit 发布于2019-08-23 18:17 / 604人阅读

摘要：响应式我自己的理解就是限制住像素范围然后分别写入一套就写两套或者更多但只显示一套其实吧现在很少有网站是用响应式写的主流的一些像是某宝某东都是用判断也就是做一个端一个移动端看用户用的是电脑还是手机根据判断结果更改页面地址那为什么还要学呢。。。

响应式

我自己的理解
就是限制住像素范围
然后分别写入一套css
HTML就写两套或者更多但只显示一套

其实吧
现在！！！
很少有网站是用响应式写的
主流的一些像是某宝某东

都是用js判断
也就是做一个pc端一个移动端
看用户用的是电脑还是手机
根据判断结果更改页面地址

那为什么还要学呢。。。
应付面试啊！

反正又不难
学就学喽

方法1 -- css写法

// CSS
@media(max-width:320){ // 320像素以下执行里面的css  范围：0 ~ 320
    body{ background:red }
}


@media(min-width:321) and ( max-width:375 ){ // css  范围：321 ~ 375
    body{ background:blue }
}


@media(min-width:376){ // css  范围：376 ~ 正无穷
    body{ background:purple }
}

方法2 -- link写法

用文件代替内容

应用

做响应式的时候：
先做手机 再做网站 --- Mobile first 【推荐】
先做网站 再做手机 --- Desktop first

用js判断一下是网站还是手机
并写入不同的地址

//js

function judge(){
        if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            //window.location.href="移动端url";
            alert("mobile")
        }
        else {
            // window.location.href="pc端url"; 
            alert("pc")
        }
}
judge();

meta 标签

作用：标签就是告诉浏览器, 不要在移动端显示的时候缩放

GPU云服务器云服务器响应式响应式布局响应式网站响应式设计

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

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

响应式布局的实现

摘要：响应式布局的概念响应式布局，即，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。框架实现响应式布局利用中栅格系统可以简单实现响应式布局，这里就需要去理解一下啥是栅格系统代表在端上显示在一行的个栅栏，也就是一半。响应式布局的概念响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏...

syoya 2019-08-30 10:55 评论0 收藏0
响应式web设计--媒体查询

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

Eric 2019-08-29 16:07 评论0 收藏0
响应式web设计--媒体查询

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

Salamander 2019-08-02 11:00 评论0 收藏0
谈谈响应式布局

摘要：今天在这里就略微谈一下响应式布局吧想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一接下来我们从小到大来谈谈响应式网页设计的基本原则为什么为什么需要响应式设计想必这点不说大家都能想到答案现在是一个移动为先的时代我们要今天在这里就略微谈一下响应式布局吧,想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一,接下来我们从小到大来谈谈响应式网页...

smallStone 2019-08-29 11:30 评论0 收藏0