来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

网上澳门金莎娱乐基于screen.width的伪响应式开发

只要我们确认了用户的屏幕尺寸,我们就可以在一开始就确定我们的页面布局以及所需要的交互,例如,可以在标签内放入这么一段内联script:

准备工作1:设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

这段代码的几个参数解释:

  • width = device-width:宽度等于当前设备的宽度

  • initial-scale:初始的缩放比例(默认设置为1.0)  

  • minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)    

  • maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)   

  • user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面) 

 

上面的脚本在页面加载的一开始,就确定了是大屏,普通屏还是小屏,然后再执行响应的渲染和脚本执行。您可以根据自己实际项目,修改上面的size变量。

In  a  word,   @media 有三大要点:

那有没有什么办法既能满足响应式的需求,同时我们开发这边不要那么烦心呢?

  1,meta 标签;

二、回到传统的响应式开发

2,兼容IE;

PC浏览器如何测试?

CSS3媒体查询总结,CSS3媒体总结

1、什么是媒体查询

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

 

2、为什么响应式设计需要,媒体查询
如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式

 

3、如何在CSS文件中引入媒体查询

媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式

4、怎样使用media**

这是基于CSS的布局控制,因此,当我们缩小浏览器窗口,可以即时看到布局变化。但是,这种实现在我看来,除了让总监大人可以方便体验窄屏效果外,就然并卵了! 而反倒是有可能增加了额外的资源消耗和开发成本。

准备工作3:设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8:

网上澳门金莎娱乐 1

为了防止这种情况,我们需要下面这段代码来让IE的文档模式永远都是最新的:

这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上,不过不用也是可以的。

二、怎样在CSS文件中写CSS响应式媒体查询 

例:  根据不同宽度样式改变

HTML:

<ul> <li>John Doe</li> <li>Mary Moe</li> <li>Amanda Panda</li> </ul>   CSS: //宽度小于500像素 @media screen and (max-width:500px) {       ul>li {                    background: blue;                    color: #fff;                    font-size: 12px;               } }   //宽度在500-700像素 @media screen and (max-width:700px) and (min-width:501px) {        ul>li {                     background: goldenrod;                     color: #000;                     font-size: 16px;               } }   //宽度在700-1000像素 @media screen and (max-width:1000px) and (min-width:701px) {                    ul>li {                                 background: plum;                                 color: #000;                                 font-size: 20px;                            } }   网上澳门金莎娱乐,//宽度大于1000像素 @media screen and (min-width:1001px) {                    ul>li {                                  background: violet;                                  color: #333;                                  font-size: 22px;                           } } //样式结束  

三、screen.width伪响应式开发

3,@media  screen  and (max-width:980px){}         (示例样式)

http://www.bkjia.com/Javascript/1218335.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1218335.htmlTechArticleCSS3媒体查询总结,CSS3媒体总结 1、什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向...

然后,本文的策略是经过真实目前在线的有一定分量的项目验证过的,同事认同,Boss认同(除了缩小屏幕没法体验手机),自己跳开了很多坑,更加认同。有机会,你也不妨试试。

准备工作2:加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

 

@media screen and (max-width: 480px) { /* 窄屏下 */}

试试使用screen.width来做伪响应式开发。

考虑到真实的用户使用场景,基于screen.width的伪响应式开发对用户而言,没有任何区别,该什么设备看到的还是那个设备该有的样子;但是,对于开发人员,也就是我们前端开发自己而言,那就不一样了,一条故事线下来,逻辑清晰,处理轻松,设计师把PC和Mobile涉及的差异再明显,我也能从容应对,对吧,if{} else{}里面互不干扰,好轻松~

于是乎,我们无论是CSS渲染还是JS逻辑处理,都是1条线下来,完全没有@media screen即时切换而不得已耦合在一起的JS逻辑处理。

这就导致问题来了,CSS浏览器渲染,本身即时响应。但JS且不一样,我们必须实时监测是PC宽度还是Mobile宽度,同时PC的click事件和Mobile的touch事件可能就在同一个元素上搞基了,也蛮累心的。为了我们自己省心,我们就可能去限制设计师再做响应式设计的时候,两者差异不要太大。我去,技术已经不是帮助产品设计体验升级,而是去制约设计了,贵司的设计师好惨!

测试的话不是缩小浏览器宽度,而是打开控制台,进入手机模式,此时,screen.width也会跟着一起变哦~记得刷新下页面~

(function(doc, win) { var screenWidth = 0, size = 'M', root = doc.documentElement; if (window.screen  screen.width) { screenWidth = screen.width; if (screenWidth  1920) { // 超大屏,例如iMac size = 'L'; } else if (screenWidth // 小屏,如手机 size = 'S'; } } // 标记CSS root.className = size; // 标记JS win.SIZE = size; })(document, window);

手机如果横着访问会怎样?

在“CSSOM视图模式相关整理”一文中有过介绍,IE9以及以上浏览器才支持。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:网上澳门金莎娱乐基于screen.width的伪响应式开发

关键词: