画面の大きさが違う端末でもCSSを崩さないようにしたい

###前提・実現したいこと
Monacaで買い物リストに商品を追加するアプリを作っています。
タブレットの画面では下の画像のようにCSSが整っていますが、
↓ipad
スマホなど、画面の大きさが違う端末でこのアプリを起動すると
↓Nexus 5Xと同じ比であるスマホ
上の画像のようにCSSが崩れてしまいます。
なので、別の端末になってもCSSが崩れない方法はないのでしょうか。

###該当のソースコード

css
1/**/
2#drawer_button{
3    margin-top: 10px;
4}
5
6html{
7    height: 100%;
8}
9body{
10    font-family:"ＭＳ ゴシック",san-serif;
11    color:#330000;
12    margin: 0px;
13    padding: 0px;
14    height: 100%;
15}
16div img {
17    height:40px;
18    width:40px;
19    padding-top: 10px;
20    padding-right: 5px;
21}
22
23#header {
24    display: flex;
25    justify-content: space-between;
26    width:100%;
27    height: 67px;
28    position: fixed;  
29    top: 0;  
30    left: 0;
31    background-color: #ffffff;
32    border: 1px solid #9F99A3;
33    /*z-index:998;*/
34}
35/*.drawer{
36    z-index:999;
37}*/
38#header img{
39    margin-top:1%;
40}
41#category{
42    width:33.4%;
43    float:right;
44}
45.category{   
46    display: block; 
47    border: 1px solid #9F99A3;
48    background-color: #f0fff0;
49    text-decoration: none;
50    color: #333;
51    width:100%;
52    text-align: center;
53    font-size: 25px;
54}
55#c0{
56    border: 2px solid #666666;
57}
58/* clearfix */
59.view:before,
60.view:after {
61    content: "";
62    display: table;
63}
64.view:after {
65    clear: both;
66}
67.view{
68    float:left;
69}
70.a{
71    overflow: hidden;
72}
73/* clearfix */
74.a:before,
75.a:after {
76    content: "";
77    display: table;
78}
79.a:after {
80    clear: both;
81}
82/*-------------------------menu.html-------------------------*/
83.menu{
84    width:33.3%;
85    display: block; 
86    border: 1px solid #9F99A3;
87    background-color:#ffffff;
88    float:left;
89}
90.item{
91    display: block; 
92    border: 1px solid #9F99A3;
93    background-color: #f0fff0;
94    text-decoration: none;
95    width:100%;
96    font-size: 25px;
97}
98.itemname{
99    float:left;
100    width:90%;
101}
102.itemimg img{
103    width:17.5px;
104    height:17.5px;
105}
106.space{
107    display: block; 
108    border: 1px solid #9F99A3;
109    background-color: #ffffff;
110    text-decoration: none;
111    width:100%;
112    font-size: 25px;
113    padding-top:5%;
114}
115.underspace{
116    display: block; 
117    border: 1px solid #9F99A3;
118    background-color: #ffffff;
119    text-decoration: none;
120    width:100%;
121    font-size: 25px;
122    padding:60% 0% 60% 0%;
123}
124#category-goods{
125    width:33.3%;
126}
127.goods{
128    display: block; 
129    border: 1px solid #9F99A3;
130    background-color: #f0fff0;
131    text-decoration: none;
132    width:100%;
133    font-size: 25px;
134    text-align:center;
135}
136
137/*-------------------------list.html-------------------------*/
138#main{
139    padding-top:6.8%;/**/
140}
141#list{
142    float:left;
143    width:66.6%;
144    
145}
146.list{   
147    display: block;
148    border: 1px solid #9F99A3;
149    background-color: #f0fff0;
150    text-decoration: none;
151    color: #333;
152    width:100%;
153    text-align: left;
154    font-size: 25px;
155    float:left;
156    
157}
158.list div{
159    float:left;
160}
161.Name{
162    width:35%;
163}
164.count{
165    width:35%;
166}
167.text3{
168    padding-bottom:1%;
169}.plus{
170    width:15%;
171}
172.plus img{
173    height:35px;
174    width:35px;
175}
176.minus img{
177    height:35px;
178    width:35px;
179}
180/*------------------------goods_edit-------------------------*/
181.list2{   
182    display: block;
183    border: 1px solid #ffffff;
184    background-color: #f0fff0;
185    text-decoration: none;
186    color: #333;
187    box-sizing: border-box;
188    text-align: left;
189    font-size: 25px;
190    width: 50%;
191    float: left;
192    white-space: nowrap;
193    overflow-x: scroll;
194}
195/*------------------------shop_edit-------------------------*/
196#list3{
197    float:left;
198    overflow: hidden;
199    width:100%;
200}
201.list3{   
202    display: block;
203    border: 1px solid #999999;
204    background-color: #c1ffe0;
205    text-decoration: none;
206    color: #333;
207    box-sizing: border-box;
208    text-align: center;
209    font-size: 25px;
210    width:50%;
211    float: left;
212}
213.Name3{
214    margin: auto;
215    width: 65%;
216    height: 40px;
217    white-space: nowrap;
218    overflow: hidden;
219    margin: auto;
220    text-overflow: ellipsis;
221}
222.map{
223    height:20%;
224    width:70%;
225}
226/*------------------------tabletid_confirmation-------------------------*/
227.confirmation{
228    display: block;
229    border: 1px solid #9F99A3;
230    background-color: #f0fff0;
231    text-decoration: none;
232    color: #333;
233    width:100%;
234    height: 90.5%;
235    text-align: center;
236    font-size: 25px;
237    padding-top:6.8%;/**/
238}
239.text1{
240    padding-top: 20%;
241    padding-bottom:2%;
242}
243.text2{
244    font-size:50px;
245    padding-bottom:2%;
246}
247.text3{
248    padding-bottom:2%;
249}
250.text4{
251    padding-bottom:2%;
252}
253/*------------------------register_and_edit2-------------------------*/
254.register{
255    display: block;
256    border: 1px solid #9F99A3;
257    background-color: #f0fff0;
258    text-decoration: none;
259    color: #333;
260    width:100%;
261    height: 90.5%;/**/
262    padding-top: 6.8%;/**/
263    text-align: left;
264    font-size: 25px;
265    overflow: hidden;
266}
267.goodsname{
268    padding-top:15%;/**/
269}
270.shopname{
271    padding-top:5%;/**/
272}
273#Name5{
274    float:left;
275    padding-left:35%;
276    padding-right:5%;
277}
278.category5{
279    padding-top:5%;
280}
281#cate{
282    float:left;
283    padding-left:30%;
284    padding-right:20%;
285}
286.submit{
287    padding-top:5%;
288}
289#OK1{
290    padding-top:5%;
291    padding-left:59%;
292}
293#Delete{
294    float:left;
295    padding-left:46%;
296    padding-right:7%;
297}
298input[type="text"]{
299    width:22%;
300    border-radius:0;
301    border:none;
302    border-bottom:3px solid #999999;
303    background-color:#f0fff0;
304    font-size:24px;
305}
306select{
307    font-size:18px;
308}
309input[type="button"]{
310    border:none;
311    background:none;
312    border-radius:0;
313    font-size:24px;
314}
315.plusBtn{
316    background:none;
317    border:0;
318}
319 
320.plusBtn:active{
321}

css
1.dropmenu{
2    display: block; 
3    border: 1px solid #9F99A3;
4    background-color: #f0fff0;
5    text-decoration: none;
6    color: #333;
7    width:100%;
8    text-align: center;
9    font-size: 25px;
10}
11.dropmenu:after{ content: ""; display: block; clear: both; }
12ul.dropmenu{  margin: 0; padding: 0; }
13.dropmenu ul{
14	position: absolute;
15	margin: 0;
16	padding: 0;
17 }
18/*一番最初に表示されるメニュー名*/ 
19.dropmenu li{
20	list-style-type: none;
21	position: relative;
22	width: 100%;
23	height: 27px;
24	line-height: 27px;
25	background: #f0fff0;
26	text-align: center;
27}
28.dropmenu li a{
29	display: block;
30	height: 27px;
31	line-height: 27px;
32	vertical-align: middle;
33	color: #000000;
34	text-decoration: none;
35}
36.dropmenu li span{
37	display: table-cell;
38	width: 100px;
39	height: 27px;
40	line-height: 27px;
41	vertical-align: middle;
42	background: #f0fff0;
43	color: #000000;
44	text-decoration: none;
45	cursor: pointer;
46}
47.dropmenu li ul li{
48	float: left;
49	position: relative;
50    /*左右設定 */ 
51	right: 400px;
52	top: -27px;
53}
54/*左に出てくるメニューの設定*/ 
55.dropmenu li ul li a{
56	height: 27;
57    width: 400px;
58	line-height: 27px;
59	vertical-align: middle;
60	border: 1px solid #9F99A3;
61	background: #f0fff0;
62	text-align: center;
63    white-space: nowrap;
64    overflow-x: scroll;
65}
66.dropmenu li:hover > a{ background: #f0fff0; }
67.dropmenu li a:hover, .dropmenu li span:hover{ background: #f0fff0;  }
68.dropmenu li ul li{
69	overflow: hidden;
70	height: 0;
71	transition: .2s;
72}
73.dropmenu li:hover ul li{
74	overflow: visible;
75	height: 27px;
76}