精华内容
下载资源
问答
  • web百分比布局
    千次阅读
    2020-08-15 14:39:31

    写一个产业图谱的页面已经很久,却从没有进行复盘过。自己细细一想,自己写的页面,对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。
    知识点:
    基本的Html页面构成:

    //<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        //sttyle中填写相应的样式
         <style>
        </style>
    </head>
    //body 元素定义文档的主体
      <body>
    	   <div>
    	   </div>
      </body>
    </html>
    
    

    以上的<html>,<body>,<div>科技将其理解为三层递进关系,祖——父——子。

    那么我们进行页面的百分比设计时。有两个基本的知识要记住:
    1、div默认没有height,width为100%,单独成一行
    2、div的width设置的百分比只是相对于父级元素,可以理解为body的父级是html,div的父级是body.那么html的父级我们可以理解为window窗口。

    那么页面布局我们最开始会常遇到的问题是什么?

    1、如何让两个div横向并排显示:float:left,right,display:inline,inline-block

    2、如何让两个div垂直并排:div默认width100%,无height

    3、如何让div内部元素垂直居中:ine-height=height,或
    display:table-cell;vertical-align:middle;text-align:center

    4、如何去除横纵向滚动条:overflow:hidden

    5、如何让div水平居中:margin:0 auto;

    6、如何控制元素间的间距:margin与padding

    布局?我理解为将元素摆在应该的位置。
    以上的6个问题的解决方案,能基本解决百分比布局中存在 问题。
    下面举一个列子:
    在这里插入图片描述如果我们要完成以上的页面布局,分析:
    1、html占屏幕height与width都是100%;

    2、body占html的height与width也是100%;

    3、body中的结构应是倒E字型的机构,顶部一个div,width占100%,高度为其自己的”背景图片的高度;中间为三个div并排显示。宽度分布为30%,40%,30%,高度为90%。

    4,、左边div中上中下3个div,中间分为上下两个div,右边也为上中下三个div

    分析了大体布局,那么可以着手写代码了。html代码可以分为总——分(总——分()),这样 模式,从整体——局部(局部整体——局部)
    下面是代码:

    <!doctype html>
    <html  style="height:100%;width:100%;">
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
            /* 图片背景*/
            body {
                background: url(/img/bg2.jpg) no-repeat;
                background-size: 100% 100%;
                height:100%;
                width:100%;
                overflow:hidden
                /*margin-top: 1%;*/
            }
            /*   头部图片样式*/
            .top-banner img {
                width: 50%;
                height: auto;
            }
    
            .top-banner {
                text-align: center
            }
    
            /* 设置左中右div距顶部的高度百分比*/
            .pull-left {
                margin-top: 3%;
                float: left;
                border: red solid 1px;
            }
    
            .zscqStyle {
                color: #acd3fc;
                font-size: 13px;
                cursor: pointer;
                /* border:deepskyblue solid;
                 border-width:thin;*/
            }
    
            .zscqStyle2 {
                color: #f8b52d;
                font-size: 19px;
                /*border:deepskyblue solid;
                border-width:thin;*/
            }
        </style>
    </head>
    <body>
    <div class="row">
        <div class="col-xs-12">
            <!--页面上方显示的字“....咨询平台”-->
            <div class="top-banner">
                <img th:src="@{/img/争先进位科创服务平台.png}" alt="火炬" href="/index" onClick="javascript :history.back(-1);">
                <!--                <a style="background:url(/img/回到首页_03.png);background-size:100% 100%;float: right;color:#f9de49;font-size: 0.16rem;text-decoration :none;padding: 0.16rem;padding-top:0.08rem;"-->
                <!--                   href="/index" onClick="javascript :history.back(-1);">回到首页</a>-->
            </div>
            <!--  <a style="text-decoration:none;float: right;color: white;font-size: 16px" href="/index" onClick="javascript :history.back(-1);">返回上一页</a>-->
        </div>
    </div>
    
    <!--左边部分-->
    <div class="pull-left" style="height:90%;width:33%;" >
    <!-- 左边三部分-->
        <div  style=" background:#000;background:url(/img/text-box_03.png) no-repeat;background-size: 100% 100%;height: 36%;" ></div>
        <div  style=" position: relative;top:10px;background:url(/img/text-box_08.png) no-repeat;background-size: 100% 100%;height: 18.5%;" >
            <div style="height: 100%;">
                <div style="float: left;width:28%;height:100%;background:url(/img/知识产权_03.png) no-repeat;background-position:center;background-size:90% 60%;">
                    <div style=" float:left; width:30%;height:100%;margin-top: 54%;margin-left: 10%">
                        <img src="/img/知识产权_10.png" style="height:32px;width:32px;" alt="知识产权">
                    </div>
                    <div style="float:left; width:52%;height:100%;margin-top: 50%;margin-left: 6%">
                        <span id="lwsSpan" class="zscqStyle">论文数</span><br/>
                        <span id="lwsSpan2" class="zscqStyle2">4</span>
                        <span id="lwsSpan3" class="zscqStyle"></span>
                    </div>
                </div>
                <div  style="float: left;width:28%;height:100%;background:url(/img/知识产权_03.png) no-repeat;background-position:center;background-size:100% 60%;">
                </div>
                <div  style="float: left;width:40%;height:100%;background:url(/img/知识产权_03.png) no-repeat;background-position:center;background-size:90% 60%;">
                </div>
            </div>
        </div>
        <div  style=" position: relative;top:20px;background:url(/img/人才情况.png) no-repeat;background-size: 100% 100%;height: 38%;cursor:pointer" ></div>
    </div>
    
    <!--中间部分-->
    <div class="pull-left" style="height:90%;width:33%;" >
        <div style="height: 15%;display:-webkit-flex;display: flex;justify-content: space-around;cursor:pointer">
            <!--企业数-->
            <div id="qys" style="display: inline-block;height: 100%;width:22%;">
                <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
                </div>
                <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
                </div>
            </div>
            <!--工业总产值-->
            <div id="gyzcz" style="display: inline-block;height: 100%;width:22%;">
                <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
                </div>
                <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
                </div>
            </div>
            <!--从业人数-->
            <div id="cyrs" style="display: inline-block;height:100%;width:22%;">
                <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
                </div>
                <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
                </div>
            </div>
            <!--载体数量-->
            <div id="kjxm1" style="display: inline-block;height: 100%;width:22%;">
                <div style="background:url(/img/target2.png) no-repeat;background-size: 100% 100%;display: block;height:40%;text-align: center;verticle-align:middle;padding:6%">
                </div>
                <div style="background:url(/img/target1.png) no-repeat;background-size: 100% 100%;display: block;text-align: center;height:50%;padding:6%">
                </div>
            </div>
        </div>
    
        <div style="position:relative;top:14px;width:100%;height:90%;background:url(/img/地图边框.png) no-repeat;background-size: 100% 84%;display: block;"></div>
    </div>
    
    <!--右边部分-->
    <div class="pull-left" style="height:90%;width:33%;" >
        <div style="background:url(/img/text-box_05.png) no-repeat;background-size: 100% 100%;height: 41%;"></div>
        <div style="position:relative;top:10px;background:url(/img/text-box_10.png) no-repeat;background-size: 100% 100%;height: 30%;"></div>
        <div style="position:relative;top:20px;background:url(/img/科研机构.png) no-repeat;background-size: 100% 100%;height: 20%;"></div>
    </div>
    
    <!--下边部分-->
    <div>
    </div>
    </body>
    </html>
    

    真个页面布局用了:
    元素标签:div,backgound',span,img
    css属性:float:left;margin-top,display: inline-block, position: relative;top:10px,height,width,border

    结合以上,代码你可以初步认识页面的百分比布局

    更多相关内容
  • 移动web开发流式布局/百分比布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋...

    移动web开发流式布局/百分比布局

    1.0 移动端基础

    1.1浏览器现状

    PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

    移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。

    国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。

    总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。

    1.2 手机屏幕的现状

    • 移动端设备屏幕尺寸非常多,碎片化严重。
    • Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等,还有传说中的2K,4k屏。
    • 近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。
    • 作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是 px 。

    1.3常见移动端屏幕尺寸

    在这里插入图片描述

    1.4移动端调试方法

    • Chrome DevTools(谷歌浏览器)的模拟手机调试
    • 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
    • 使用外网服务器,直接IP或域名访问

    2.0 视口

    视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

    2.1 布局视口 layout viewport

    一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。

    iOS, Android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。

    在这里插入图片描述

    ####2.2视觉视口 visual viewport

    字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。

    我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。

    在这里插入图片描述

    2.3理想视口 ideal viewport

    为了使网站在移动端有最理想的浏览和阅读宽度而设定

    理想视口,对设备来讲,是最理想的视口尺寸

    需要手动添写meta视口标签通知浏览器操作

    meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽

    总结:我们开发最终会用理想视口,而理想视口就是将布局视口的宽度修改为视觉视口

    2.4meta标签

    在这里插入图片描述

    最标准的viewport设置

    • 视口宽度和设备保持一致
    • 视口的默认缩放比例1.0
    • 不允许用户自行缩放
    • 最大允许的缩放比例1.0
    • 最小允许的缩放比例1.0

    3.0二倍图

    ####3.1物理像素&物理像素比

    物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334

    我们开发时候的1px 不是一定等于1个物理像素的

    一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比

    如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放

    lRetina(视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。

    对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊

    在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题

    通常使用二倍图, 因为iPhone 6 的影响背景图片 注意缩放问题

    3.2背景缩放background-size

    background-size 属性规定背景图像的尺寸

    background-size: 背景图片宽度 背景图片高度;
    

    单位: 长度|百分比|cover|contain;

    cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

    4.0 移动开发选择和技术解决方案

    ####4.1移动端主流方案

    1.单独制作移动端页面(主流)

    通常情况下,网址域名前面加 m(mobile)
    可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。

    也就是说,PC端和移动端为两套网站,pc端是pc断的样式,移动端在写一套,专门针对移动端适配的一套网站

    京东pc端:

    在这里插入图片描述

    京东移动端:

    在这里插入图片描述

    2.响应式页面兼容移动端(其次)

    在这里插入图片描述

    响应式网站:即pc和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配

    4.2 移动端技术解决方案

    1.移动端浏览器兼容问题

    移动端浏览器基本以 webkit 内核为主,因此我们就考虑webkit兼容性问题。

    我们可以放心使用 H5 标签和 CSS3 样式。

    同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

    2.移动端公共样式

    移动端 CSS 初始化推荐使用 normalize.css/

    Normalize.css:保护了有价值的默认值

    Normalize.css:修复了浏览器的bug

    Normalize.css:是模块化的

    Normalize.css:拥有详细的文档

    官网地址: http://necolas.github.io/normalize.css/

    4.3 移动端大量使用 CSS3盒子模型box-sizin

    传统模式宽度计算:盒子的宽度 = CSS中设置的width + border + padding

    CSS3盒子模型: 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

    也就是说,我们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了

    /*CSS3盒子模型*/
    box-sizing: border-box;
    /*传统盒子模型*/
    box-sizing: content-box;
    
    

    移动端可以全部CSS3 盒子模型

    PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择 CSS3 盒子模型

    4.4移动端特殊样式

        /*CSS3盒子模型*/
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
        -webkit-tap-highlight-color: transparent;
        /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
        -webkit-appearance: none;
        /*禁用长按页面时的弹出菜单*/
        img,a { -webkit-touch-callout: none; }
    
    

    5.0移动端常见布局

    移动端单独制作

    • 流式布局(百分比布局)
    • flex 弹性布局(强烈推荐)
    • less+rem+媒体查询布局
    • 混合布局

    响应式

    • 媒体查询
    • bootstarp

    流式布局:

    流式布局,就是百分比布局,也称非固定像素布局。

    通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

    流式布局方式是移动web开发使用的比较常见的布局方式。

    展开全文
  • 物理像素比二倍图背景缩放 background-size移动端技术解决方案CSS3盒子模型box-sizing移动端特殊样式设置移动端常见布局流程布局/百分比布局flex布局flex布局小练习需求1: 常见的上下结构需求2:背景渐变色需求3:10...

    移动Web开发学习笔记

    视口 viewport

    视口是浏览器显示页面内容的屏幕区域,分为布局视口、视觉视口和理想视口。
    布局视口:移动设备的浏览器默认设置了布局视口
    问题:元素显示是按在布局视口显示的,所以视觉视口元素看上去很小,默认通过手动缩放网页
    在这里插入图片描述
    理想视口: 网页在手机屏幕显示完整,手机屏幕有多宽,布局视口就有多宽

    meta视口标签

    meta视口标签的主要目的:布局视口的宽度和理想视口宽度一致

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    
    属性解释说明
    width宽度设置的是viewport视口宽度,可以设置为device-width设备宽度
    initial-scale初始缩放比,大于0的数字
    aximum-scale最大缩放比,大于0的数字
    minimum-scale最小缩放比,大于0的数字
    user-scalable用户是否可以缩放,yes或no( 1或0)

    二倍图

    物理像素 & 物理像素比

    物理像素: 真实存在的,在厂商出厂时就设置好了,比如苹果6是750*1334
    物理像素比: 1px能够显示的物理像素点的个数

    PC端: 1px(css像素)=1个物理像素
    移动端: 不同的手机物理像素比不同,iPhone8中1px=2个物理像素
    在这里插入图片描述

    二倍图

    图片按照物理像素比放大会变模糊
    在标准的viewport设置中,使用多倍图来提高图片质量,解决在高清设备中的模糊问题,通常使用二倍图

    举例
    需要一个5050css像素的图片,直接放入iphone8(物理像素比为2)中会放大2倍,图片会模糊。
    可以采用放一个100*100css像素的图片,手动把这个图片缩小成50
    50像素,放大两倍后图片依然是清晰的,因为图片本身就是100*100css像素的。

    <style>
    	img{
    		width:50px;
    		height:50px;
    	}
    </style>
    <body>
    <img src='100.jpg'>
    </body>
    

    背景缩放 background-size

    语法: background-size: 背景图片宽度 背景图片高度

    为了清晰一般缩放大小和盒子大小一致

    说明
    1.如果只设置一个参数,另外一个参数会等比例缩放
    2.单位: 长度|百度比|cover|contain
    cover 扩展图片到完全覆盖背景区域
    在这里插入图片描述
    contain 扩展图像使其宽度或高度达到内容区域边界即可。
    在这里插入图片描述

    移动端技术解决方案

    css初始化 normalize.css

    CSS3盒子模型box-sizing

    传统模式宽度计算 盒子宽度 = width+border+padding
    css3盒子模型 盒子宽度 = width(包含了border和padding)
    默认值:content-box

    /*CSS3盒子模型   width表示的范围到border*/
    box-sizing:border-box;  
    /*传统盒子模型 width表示的范围到content*/
    box-sizing:content-box;
    

    移动端特殊样式设置

    1.点击高亮需要清除

    -webkit-box-highlight-color:transparent;
    

    2.去掉IOS的按钮和输入框的默认样式,才可以自定义按钮和输入框样式

    -webkit-appearance:none;
    

    3.禁用图片或链接长按页面时弹出菜单

    img,a{
    	-webkit-touch-callout:none;
    }
    

    移动端常见布局

    • 单独制作移动端页面(主流)
      • 流式布局(百分比布局)
      • flex弹性布局
      • less+rem+媒体查询布局
      • 混合布局
    • 响应式页面兼容移动端
      • 媒体查询
      • bootstarp

    流程布局/百分比布局

    流式布局: 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,内容向两侧填充

    可以配合下面属性使用限制盒子的伸缩的最大值与最小值

    • max-width 最大宽度 max-height 最大高度
    • min-width 最小宽度 max-height 最小高度

    flex布局

    学习笔记

    flex布局小练习

    需求1: 常见的上下结构

    修改主轴为y轴,把侧轴设置为居中对齐
    在这里插入图片描述

    .out{
    	display:flex;
    	flex-direction:column;
    	align-item:center; /*单行元素*/
    }
    

    需求2:背景渐变色

    语法:background:-webkit-linear-gradient(起始方向left…,颜色1,颜色2…)

    需求3:10个盒子占两行

    .out{
    	display:flex;
    	flex-wrap:wrap
    }
    .inner{
    	//盒子里面可以写百分号,相对于父级来说
    	flex:20%
    }
    

    需求4:> 箭头符号

    一个正方形,设置白色的上边框和右边框,然后旋转45°

    .more::after{
    	content:'';
    	width:7px:
    	height:7px:
    	border-top:2px solid #fff;
    	border-right:2px solid #fff;
    	transform:rotate(45deg);
    }
    

    rem适配布局 rem+媒体查询

    rem适配布局:通过媒体查询修改html元素的字体大小整体控制页面

    rem单位

    主要特点
    1.页面布局文字也可以随屏幕大小变化而变化
    2.流式布局和flex布局只要针对宽度布局,rem可以针对高度布局
    3.屏幕发生变化的时候元素高度和宽度等比例缩放

    rem(root em)是一个相对单位,相对于html元素的字体大小
    em是一个相对单位,是相对父元素的字体大小

    媒体查询 Media Query

    媒体查询可以针对不同的屏幕尺寸设置不同的样式

    语法: @media mediatype and|not|only (media feature){}

    • @media 声明是媒体查询
    • mediatype 媒体类型 all所有|print打印机|scree电脑屏幕等
    • 关键字 将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
    • 媒体特性 width|min-width|max-width
    /*宽度小于等于800的屏幕执行代码 !包含等于*/
    @media screen and (max-width:800px){
    	body{
    		background-color:pink;
    	}
    }
    

    建议从小到大写

    引入资源

    当样式比较多的时候,可以针对不同的媒体使用不同stylesheets(样式表)
    原理:在link中判断设备的尺寸,然后引入不同的css文件

    <link rel="stylesheet" media="ediatype and|not|only (media feature)" href="xxx.css">
    

    rem适配方案

    使用场景:当设备尺寸发生改变的时候,等比例适配当前设备

    rem适配方案原理
    1.使用媒体媒体查询根据不同设备设置html字体大小
    2.页面元素使用rem做尺寸单位

    技术方案1:less+媒体查询+rem
    技术方案2:flexible.js+rem

    技术方案1:less+媒体查询+rem

    1.假设设计稿是750px
    2.我们可以把整个屏幕划分为15等份
    3.每一份作为html字体大小,这里就是50px

    common.less

    //定义划分的份数为15
    @no:15
    @media screen and (min-width:320px){
    	html{
    		font-size:(320px/@no);
    	}
    }
    //....其他尺寸的媒体查询
    

    安装easy less插件,代码写在less文件里,会自定生成css文件

    将common.less导入到index.less中

    @import "common";
    

    css居中的笔记:https://blog.csdn.net/qq_41370833/article/details/123765686

    magin居中,需要盒子有宽度

    body{
    	min-width:320px;
    	width:15rem;
    	margin:0 auto;
    }
    

    定位元素居中 position:absolute + transform,盒子宽度有无都行

    .search-content{
    	position:fixed; //固定定位和绝对定位特点基本一致
    	top:0;
    	left:50%;
    	transform:translateX(-50%);/*相对于元素自身的50%*/
    }
    

    将外部盒子设置为flex盒子,中间弹性元素设置成flex=1自适应
    flex=1 意思是flex:1 1 0% 表示可以增长,可以收缩,但在容器不足时会优先最小化内容尺寸
    flex-grow 定义弹性元素的放大比例,默认为0,即如果存在剩余空间,也不放大
    flex-shrink定义了弹性元素的缩小比例,默认为1,即如果空间不足,该弹性元素将缩小
    flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即弹性元素本身的大小
    在这里插入图片描述

    .search-content{
    	dipaly:flex;
    	.classify{//固定部分
    		//....
    	}
    	.search{
    		flex:1; //自适应
    	}
    }
    

    实现了三个不同内容的 div 平分空间

    .container{
            width: 300px;
            display: flex;
    }
    div{
            border: 1px solid red;
            flex: 1;
     }    
    

    技术方案2:flexible.js+rem

    flexible.js 移动端适配库
    把当前设备划分成了10等份,不同设备都会被分成10份 ,不需要手动写不同屏幕的媒体查询。
    会自动设置html的font-size的大小。

    VSCode插件px to rem:px转换rem插件,写成px自动转换成rem
    插件默认的html文字大小 cssroot:16px

    修改插件默认的html文字大小
    在这里插入图片描述

    响应式布局 bootsrap

    响应式需要一个父级作为布局容器。
    在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化

    在这里插入图片描述

    展开全文
  • 移动web 移动端特点、百分比布局、flex布局
  • 响应式布局之百分比布局

    千次阅读 2019-08-20 02:07:43
    百分比布局(流式布局) 百分比是一种相对于包含块的计量单位。利用对属性设置百分比来适配不同屏幕,注意这里的百分比是相对于父元素; 1. 究竟相对于谁的百分比? 有父元素则相对于父元素的宽度,无父元素则相...

    响应式布局即是一个页面能适应不同的终端,且能够呈现良好的显示效果。本文主要介绍一些平时做项目会用到的方法,复杂的项目也会同时用到其中的几种,根据项目实际情况进行选择。

    百分比布局(流式布局)

    百分比是一种相对于包含块的计量单位。利用对属性设置百分比来适配不同屏幕,注意这里的百分比是相对于父元素;

    1. 究竟相对于谁的百分比?

    有父元素则相对于父元素的宽度,无父元素则相对于浏览器窗口的宽度;

    2. CSS中常用属性的百分比

    子元素父元素
    width基于父级的width
    height基于父级的height
    margin(top,right,bottom,left)基于父级的width
    padding(top,right,bottom,left)基于父级的width
    left,top,right,bottom基于父元素的width,height,width,height
    font-size基于继承得到的font-size
    line-height基于当前字体的font-size
    transform(left, top)基于自身的left, top

    3. 代码示例

    <style>
        * {
          padding: 0;
          margin: 0;
        }
        div {
          float: left;
          box-sizing: border-box;
        }
        .clear::after {
          content: '';
          display: block;
          clear: both;
        }
        .wrap {
          float: none;
          max-width: 1200px;
          min-width: 480px;
          margin: 0 auto;
          border: 2px solid black;
        }
        .m1, .m2, .m3 {
          border: 2px solid black;
          height: 200px;
        }
        .m1 {
          width: 30%;
          background: red;
        }
        .m2 {
          width: 50%;
          background: green;
        }
        .m3 {
          width: 20%;
          background: blue;
        }
    
      </style>
    
    <div class="wrap clear">
        <div class="m1"></div>
        <div class="m2"></div>
        <div class="m3"></div>
      </div>
    

    在不同尺寸下显示不同
    QQ图片20190820015418.png

    QQ图片20190820015449.png

    展开全文
  • 流式布局(百分比布局) flex 弹性布局 less+rem+媒体查询布局 混合布局 响应式布局: 媒体查询 bootstarp 今天我们先来认识一下百分比布局和flex布局 1.流式布局: 流式布局,就是百分比布局,也称非固定像素...
  • 视口就是历览器显示页面内容的屏幕区域,视口可以分为布局视口、视觉视口和理想视口 布局视口(layout viewpoint) 一般移动设备浏览器都默认设置了一个布局视口,用于解决PC端页面在手机上显示的问题 即 pc端网页...
  • 响应式布局中的方案之百分比布局

    千次阅读 2019-06-08 08:21:58
    1、百分比(流式)布局定义:当浏览器的宽高发生改变时,通过百分比单位,可以使用浏览器中的组件的宽高随着浏览器的变化而变化,从而实现响应式布局。注意点:使用百分比就要注意这个百分比是谁的百分比:子元素的...
  • 前端学习笔记之流式布局(百分比布局
  • 文章目录一、移动端特点1、移动端和PC端网页不同点2、谷歌模拟器3、分辨率4、视口5、二倍图二、百分比布局三、Flex布局 一、移动端特点 1、移动端和PC端网页不同点 PC端网页屏幕大,网页固定版心 移动端网页屏幕小...
  • 一、流式布局(百分比布局)介绍 流式布局,就是百分比布局,也称非固定像素布局。 通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制, 内容向两侧填充。 流式布局方式是移动...
  • 所谓的流式布局就是我们常说的百分比布局,页面中盒子的宽度常常是通过百分比值来设置的。 流式布局的特征: a、宽度自适应,高度写死,并不是百分百还原设计图 b、图标都是固定死大小的,包括字体等也是固定死的。...
  • 以下是一个Dome <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />.../ti...
  • 百分比布局,精度肯定不会有rem精确Document* {padding: 0;margin: 0;}.one {width: 20%;height: 100px;float: left;background: red;}.two {width: 30%;height: 100px;float: left;background: blue;}.three {...
  • 流式布局(百分比布局) 视口 浏览器显示页面的屏幕区域 分为三种 布局视口 视觉视口 理想视口(重点) 总结:我们开发最终会用理想视口,而理想视口就是将布局视口的宽度修改为视觉视口 视口meta标签 <meta name=...
  • 前言移动端适配是一个非常繁琐的问题,当然,只要...目前常用的布局适配方案有百分比+flex布局;以淘宝首页为代表的 rem+viewport缩放 flexible 布局方案;固定viewport,通过js动态修改html字体大小的rem布局,这里我
  • 流式布局(百分比布局),京东手机端是流式布局 flex弹性布局(强烈推荐),携程网手机端是弹性布局 less+rem+媒体查询布局,苏宁手机端是这个布局 混合布局 2、响应式页面兼容移动端(其次) 媒体查询 ...
  • Android 百分比布局库(percent-support-lib) 解析与扩展

    万次阅读 多人点赞 2015-06-30 15:20:24
    Google终于开始支持百分比的方式布局了,瞬间脉动回来,啊咧咧。对于这种历史性的时刻,不出篇博客难以表达我内心的激动。,本文分为3个部分: PercentRelativeLayout、PercentFrameLayout的使用、对上述控件源码...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,396
精华内容 7,358
关键字:

web百分比布局