To create web pages adaptable to various mobile phone sizes, follow these steps:

1. Set the Viewport Meta Tag: Add <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> in your HTML’s head section to ensure proper scaling on different devices.

2. Use Relative Units: Switch CSS units from pixels to rem or em for font sizes and other measurements to allow elements to scale with the user’s default font size.

3. Implement Responsive Layouts: Utilize Flexbox and Grid layouts for fluid and adaptable designs. Use percentage-based widths and max-width properties to ensure elements resize proportionally.

4. Apply Media Queries: Write conditional CSS using media queries to adjust styles based on screen sizes. For example:
   @media (max–width: 768px) {       /* Adjustments for smaller screens */       .container { margin: 0 auto; width: 95%; }   }

5. Optimize Images: Use responsive images with srcset or CSS background-size to ensure images adapt to different screen sizes.

6. Test Across Devices: Test your page on various devices or use emulators to ensure responsiveness and adjust styles as needed.

By following these steps, you can create web pages that look good and function well across all mobile phone sizes.