移动端页面尺寸之一倍图二倍图三倍图

一倍图:设计稿320px 原名.png。
二倍图:设计稿640px 原名@2x.png
三倍图:设计稿750px 原名@3x.png

设置最大宽度最小宽度:父盒子要设置max-width min-width

给盒子设置最大宽度与最小宽度就是为了解决移动端自适应问题


设计稿为二倍图时:

给父盒子设置最大宽度最小宽度

/*最外层盒子  要设置最大宽度与最小宽度*/
.layout {
    /*宽度设置100%*/
    width: 100%;
    /*最大宽度 设计稿是640的设计稿是二倍图 二倍图640*/
    max-width: 640px;
    /*最小宽度  最小ip4 尺寸是320*/
    min-width: 320px;
    margin: 0 auto;
    height: 1000px;
    background-color: #ccc;
}

当子盒子设为固定定位的时候 因为定位元素参考的是视口的位置 所以我们需要给子盒子设置一个最大宽度与最小宽度 防止乱跑

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,844评论 0 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,077评论 1 45
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,829评论 0 2
  • 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概...
    Vivian_06e6阅读 2,849评论 0 1
  • 我们第一次接触移动web的时候,直观印象样应该是:屏幕比pc小很多,所以对pc端设计的界面,不一定(或者说不完全)...
    Scaukk阅读 16,988评论 6 46