一帮来说，pc端的静态页一般都是像素为基本单位，基本都是卡尺卡出来的，只要是有耐心，一般没什么大问题

而移动端的对应的终端的屏幕的大小差异太大了，为了适配不同的屏幕这时候就不能以像素px为单位了，更多的是相对的百分比%

一行平均显示两个圆并且宽高相同而且随着屏幕的大小的变化进行缩放，一般来说可以这样

一个大div中2个小div，这两个小div宽是大div的50%，高度呢就有些说法了，如果高度用百分比的话相对的父级的，但是父级默认是被子级撑开的，所以写百分百是不行的，写多少高度都是0，但是默认的padding，margin是相对父级的宽，所以我们可以设置padding-top或者padding-bottom是跟父级的宽度一样实现这个效果，

HTML：

<div class="main">
	<div></div><div></div>
<style>
body,html{
	margin:0;
	padding:0;
.main{
	width:100%;
.main div{
	width:50%;
	display:inline-block;
	background-color:#F00;
	padding-top:50%;
	border-radius:100%;
</style>

 这样做的话效果是实现了如果想往上面的红圆圈写字的话问题又出现了，本来很好的圆形变椭圆了。 
因为字默认给撑开了，这时候没有办法了，只能采用position;absolute来搞定
 
<div class="main">
	<div><span>1</span></div><div><span>2</span></div>
</div>
CSS： 
<style>
body,html{
	margin:0;
	padding:0;
.main{
	width:100%;
.main>div{
	width:50%;
	display:inline-block;
	background-color:#F00;
	padding-top:50%;
	border-radius:100%;
	line-height:100%;
	position:relative;
.main>div>span{
	
	top:50%;
	left:50%;
	margin-left:-8px;
	margin-top:-4px;
</style>
当然如果里面的字的长度是不定的，这种方法就不行了，恐怕只能用JS了
 
还有一个更简单的用vw，vh，代码比较简单：
 
HTML：
 
<div class="main">
	<div>1</div><div>2</div>
<style>
body,html{
	margin:0;
	padding:0;
.main{
	width:100%;
.main>div{
	display:inline-block;
	width:50vw;
	height:50vw;
	background-color:#F00;
	border-radius:100%;
	line-height:50vw;
	vertical-align:middle;
	text-align:center;
</style>

 效果也一样： 
不过也有问题，字不能太多，太多就跑到图外面去啦！而且兼容性不是非常好，低端的浏览器可能不支持
                                    最近遇到一个很棘手的项目，自作聪明想使用自己的一套方法自适应手机端和PC端，造成了不小错误，特地从网上学习了一下，现在把学习到的跟大家分享一下
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备...
                                浏览器打开
  可以通过设置屏幕的缩放比例来实现：
一、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
(1)、通过设置请求头实现：
<meta name="viewport" ...
                                浏览器打开
                                    <div style="width: 600px;">
 	<div style="display: inline-block;width: 100px;margin-left: 17px;margin-top: 10px"">
        <img style="width: 100%;height: 100%; :src="billImg.orderImg"...
                                浏览器打开
                                    今天在做一个ipad min 上运行app程序浏览web页面时，发现了不兼容问题。
以前在写配置时都是用(device-height:568px)这样的来写 iphone 4  5 6  6plus
现在要写一个范围内的配置，也是语法有些绕
max-height:450px 
当height 小于450时应用样式。
可能会有些无语，我写的是max大于450为什么应用时是小于450呢。
                                浏览器打开
                                    做一款软件首先是要做出相应的界面，然而对于手机软件开发者来说，大小各异的手机屏幕却给我们带来了不少的麻烦。HTML5技术在大家的心中要比传统的android/ios/wp简单的多，因为它的适配性和平台跨越方面比较出色。在外看来却不是那样的，跨平台的问题暂且不说，其屏幕适配方面并不比原生态代码简单。这里给大家分享下我总结出来的H5界面适配
                                浏览器打开
                                    今天做了一个demo，其中要用到圆形，首先想到的就是给一个div设置宽等于高，再加上border-radius等于宽的一半就好了div {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}但是如果div的宽度是百分比，继承的是父元素的宽度的百分比时，高度该如何设置为等于宽呢？div {
  width: 20%...
                                浏览器打开