响应式布局流式布局

响应式布局:根据不同的尺寸适配 viewport width=device-width 设置视口的宽度等于设备的宽度,如果不设置的话,默认视口的宽度是980px 通俗理解:我们这个操作其实展示当前这个页面一共有多宽(浏览器的宽度)

高清屏幕:苹果手机是二倍高清屏幕,也就是我们在手机上看到的那张100100的图片,其实苹果手机是按照200200的尺寸进行渲染的, 如果真实图片是100100,最后呈现出来的就是被拉伸后边模糊的效果 苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以,安卓不用 DPI适配思想:我们在做页面的时候,最好每一张图片都准备两套或三套比如: logo.png 100100 logo@2x.png logo@3x.png

 媒体查询@media:有两部分
 媒体设备:all(所有设备) screen(所有屏幕设备pc+移动) print(打印机设备)...
 媒体条件: 指定在什么样的条件下执行对应的样式
 @media all and(max-width:319px){
     //当前的宽度是小于320像素的  
 }
 @media all and (min-width:320px) and (max-width:359px){
      //大于等于320小于360
 }

响应式布局的解决方案:流式布局法 1、容器或者盒子的宽度一般都不写固定的值,而是使用百分比(相对于视口区域的百分比) 其余的样式:字体、高度、margin、padding都按照设计稿上标注尺寸的一半来设置 对于有些屏幕尺寸下我们设置的固定值看起来不是特别好看的话我们使用@media微调

在真实项目中,设计师给我们的设计稿一般是 640960 6401136 750*1334 常用的手机尺寸:5s一下都是320px 6是375px 6plus是414px的宽度 常用的安卓手机尺寸:320、360、480、540、640、720 特殊情况,设计师的设计稿是640px 我们的素材图也是640px的,这样的话在iphone6/iphone6 plus展示的时候,图片不够大,这种情况下我们需要单独找设计师要一张更大的图

      @media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px){
         .box{
             background: url("aaaa.jpg");
         }
      }
      @media all and (min-width: 640px){
          .box{
              background: url("aaaa.jpg");
          }
      }

开始项目之前的准备 http://www.jianshu.com/p/b7836e8b88ec http://www.jianshu.com/p/be1f77040606 移动端样式重置http://www.jianshu.com/p/92766697b564

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和我大前端的故事

我想推荐一本书 《CSS 世界》

前段时间张鑫旭老师的《css 世界》出版,之前看过他写的博客,写的挺好的,一直就在思考要不要买?

55610
来自专栏技术专栏

微信小程序- 移动设备的分辨率与rpx

28210
来自专栏腾讯社交用户体验设计

如何做一个让人闻风丧胆的H5 - 腾讯ISUX

18730
来自专栏十月梦想

HTML5音频audio和视频video用法解析

    html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!

50920
来自专栏wblearn

纯CSS3绘制的逼真,呆萌,超酷的CSS3动画纯CSS3人物行走动画 逼真炫酷CSS3动画纯CSS3绘制的小猫笑脸动画 超呆萌纯CSS3绘制可爱小男孩动画 超酷面部表情

41010
来自专栏Crossin的编程教室

【Pygame 第4课】 获取鼠标位置

最近微信上很火的“打飞机”游戏,通过手指在屏幕上触摸的位置来移动你的飞机。在电脑上,我们没法直接用手操作,但可以用鼠标替代手指。 在电脑游戏里,鼠标是个很好用的...

531120
来自专栏用户2442861的专栏

CSS中height:100%和height:inherit的异同

2. 大多数情况作用是一样的 除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由。

10010
来自专栏腾讯大讲堂的专栏

如何做一个让人闻风丧胆的H5

前言 最近火热的有声娱乐平台 APP,企鹅 FM,在8月28日鬼节前夕,联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师,在这个移动互联网叱咤...

21460
来自专栏快乐八哥

使用CSS制作文字环绕图片效果(文字内容包含<li>标签)

1.一般制作文字环绕图片效果。 HTML结构: View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1....

34590
来自专栏腾讯NEXT学位

你的网站可以一键变色吗?

462110

扫码关注云+社区

领取腾讯云代金券