好久没用原生写项目，拿到一个小页面有点懵
需求：手机App自适应，web端固定宽度，显示的中间
要适应手机屏幕和web端，但是页面布局没有变化。所以不要用到栅格，只要使用媒体查询配套编写不同css。这里我以479px为节点
要适应多种大小手机屏幕，页面大多使用百分比定义大小
视口
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no，user-scalable=no">
width=device-width：使布局视口的大小变成理想视口的大小，即设备屏幕的宽度
initial-scale初始缩放比例，当设置width=device-width时，initial-scale默认为1.0
minimum-scale=1,maximum-scale=1，最大缩放比例和最小缩缩放比例都是1，避免因为手机操作导致页面放到缩小，例如苹果的日期选择默认出现在页面下方，导致页面放大。
shrink-to-fit=no 苹果专属属性，值显示你要指定的，而不会缩小把宽度100%之外的也显示。
user-scalable=no不法缩放
修改placeholder样式
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #B4B4B4;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #B4B4B4;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #B4B4B4;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #B4B4B4
}
同样文本框的只要换成textArea就好了
原生表单
下拉选择框
<select name='society' id='society'>
<option value="0">- 请进行选择 -</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
问题：下拉框的样式太丑，搞了半天没找到下拉框的样式怎么改的。网上的appearance为none，设置option的样式，都没有生效。如果想要一个好看的的下拉框，还是要自己写，用div+ul。这个项目没有那么高的要求，所有我就没写。
同样还有H5 的日期，弹框是根据浏览器来的，改不了。要求高的，可以自己写。网上还有许多写好的插件，可以用。
取值
let society=document.getElementById('society').value
单选
<label ><span class='required'>*</span> 运动1</label><br>
<div class='sports'>
<input type='radio' name='sports1' value='0' checked/>羽毛球
<input type='radio' name='sports1' value='1'/>篮球
<input type='radio' name='sports1' value='2'/>乒乓球<br>
</div>
取值
let radio=Array.from(document.getElementsByName('sports1')).filter(item=>item.checked)[0].value
多选
<div class='sports'>
<input type='checkbox' name='sports2' value='0' checked/>羽毛球
<input type='checkbox' name='sports2' value='1'/>篮球
<input type='checkbox' name='sports2' value='2'/>乒乓球
</div>
取值
let checkbox=[];
Array.from(document.getElementsByName('sports2')).map(item=>{
if(item.checked)
checkbox.push(item.value)
})
let date=document.getElementById('date').value
屏蔽表单的默认提交
<form action="" method='post' onsubmit="return false">
<button class='submit' onClick='checkForm()' >
提交报名信息
</button>
</form>
表单验证
if(checkbox.length==0){
modal.innerHTML='请选择运动2!'
}else{
modal.innerHTML='提交成功！'
mask.onclick=()=>{
location.reload()
}
}
必填项提示，弹框，下面说。
如果是提交成功点击页面重新加载�
提示弹框+遮罩层
<div class='mask' onclick='closeMask()' >
<div class='modal'> </div>
</div>
css
#activity .mask{
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
position: fixed;
top: 0;
left: 0;
z-index: 998;
display: none;
}
#activity .mask .modal{
background: rgba(0, 0, 0, 0.6);
width:280px;
height:150px;
line-height: 150px;
position: absolute;
top:20%;
left:50%;
transform: translate(-50%);
border-radius: 5px;
color:#fff;
text-align: center;
font-size:16px;
}
点击提交信息
function checkForm(){
mask.style.display='block';//显示遮罩层
}
报错时点击页面
function closeMask(){
let mask=document.getElementsByClassName('mask')[0];
mask.style.display='none';//隐藏遮罩层
}
效果图如下
image.png
